0

在“with”绑定 div 中，我尝试将模型的 5 个属性绑定到 2 种不同类型的控件，即文本框和标签。但是，只有列表中的第一个属性绑定到两个控件，其余的只绑定到文本框：

    <div data-bind="with: RetrieveObject">
      <input type= "text" data-bind="value: property1" /> <br />
      <input type= "text" data-bind="value: property2" /> <br />
      <input type= "text" data-bind="value: property3" /> <br />
      <input type= "text" data-bind="value: property4" /> <br />
      <input type= "text" data-bind="value: property5" /> <br />
      <label data-bind="text: property1" /> <br />
      <label data-bind="text: property2" /> <br />
      <label data-bind="text: property3" /> <br />
      <label data-bind="text: property4" /> <br />
      <label data-bind="text: property5" /> <br />
    </div>

对象是动态填充的，这意味着它的属性是动态分配的。在我的视图模型中，我有 Object = ko.observable() 。一旦用户点击了某个按钮，我就会执行 Object(createModel1())，其中 createModel1 返回一个新的 Model1。Model1 具有定义为 ko.observable 的属性。

我不知道这是不应该工作还是我做错了什么（在错误的树上吠叫）

请帮忙！谢谢！！！

    //In my viewmodel file I have the following
        window.testApp.ViewModel = (function (ko, datacontext) {
            var searchKey1 = ko.observable(),
                searchKey2 = ko.observable(),
                RetrievedObject = ko.observable(),
                CreatedObject = ko.observable(),
                error = ko.observable(),
                findObject = function () {
                datacontext.findObject(CreatedObject, RetrievedObject, searchKey1 , searchKey2, error);}
            return {
                searchKey1: searchKey1,
                searchKey2: searchKey2,
                RetrievedObject: RetrievedObject,
                CreatedObject: CreatedObject,
                error: error,
                findObject: findObject
            };

        })(ko, testApp.datacontext);
ko.applyBindings(window.testApp.ViewModel);

    //In my datacontext file, I have the following

        window.textApp = window.testApp || {};

        window.textApp.datacontext = (function () {

            var datacontext = {
                findObject: findObject,
            };

            return datacontext;

            function findObject(createdObjectObservable, retrievedObjectObservable, searchKey1Observable, searchKey2Observable, errorObservable) {
                return ajaxRequest("get", findObjectUrl(searchKey1Observable, searchKey2Observable))
                    .done(getSucceeded)
                    .fail(getFailed);

                function getSucceeded(data) {
                    var retrievedObject = new datacontext.retriveObject(data);
                    retrivedObjectObservable(retrivedObject);
                    createdObjectObservable(datacontext.createObject(policyInfo));
                }

                function getFailed() {
                    errorObservable("Invalid Policy Number or Location Zip Code.");
                }
            }
            function createObject(retrivedObject) {
                return new datacontext.createdObject(retrivedObject);
            }
        //private
            function clearErrorMessage(entity) { entity.errorMessage(null); }
            function ajaxRequest(type, url, data, dataType) { // Ajax helper
                var options = {
                    dataType: dataType || "json",
                    contentType: "application/json",
                    cache: false,
                    type: type,
                    data: data ? data.toJson() : null
                };
                var antiForgeryToken = $("#antiForgeryToken").val();
                if (antiForgeryToken) {
                    options.headers = {
                        'RequestVerificationToken': antiForgeryToken
                    }
                }
                return $.ajax(url, options);
            }
            // routes
             function findObjectUrl(key1, key2) { return "/api/Stuff/GetStuff/?Key1=" + (key1() || "") + "&key2=" + (key2() || ""); }

        })();

//in my models file, I have following:
(function (ko, datacontext) {
    datacontext.createdObject = createdObject
    datacontext.retrievedObject = retrievedObject;

    function createdObject(data) {
        var self = this;
        data = data || {};
        self.property1 = ko.observable(data.property1);
        self.property2 = ko.observable(data.property2);
        self.property3 = ko.observable(data.property3);
        self.property4 = ko.observable(data.property4);
        self.property5 = ko.observable(data.property5);
        self.property6 = ko.observable();
        self.property7 = ko.observable();
        self.property8 = ko.observable();       
        self.errorMessage = ko.observable();
        self.toJson = function () { return ko.toJSON(self) };
    };

    function retrievedObject(data) {
        var self = this;
        data = data || {};
        self.property1 = ko.observable(data.property1);
        self.property2 = ko.observable(data.property2);
        self.property3 = ko.observable(data.property3);
        self.property4 = ko.observable(data.property4);
        self.property5 = ko.observable(data.property5);
        self.errorMessage = ko.observable();
        self.toJson = function () { return ko.toJSON(self) };
    };
})(ko, testApp.datacontext);
4

1 回答 1

1

问题只是 HTML 标签元素需要一个结束标记。换句话说，以下内容无效：

<label data-bind="text: property1" />

它应该是

<label data-bind="text: property1" ></label>

HTML 的 with 语句也有拼写错误。它应该是“检索对象”。

于 2018-05-14T14:31:04.670 回答