Question

我在应用程序中工作，如添加一个新行，删除一个新行。所有的东西都工作正常。我第一次从项目中加载数据（我有很多viewmodel绑定）单个页面），所有数据似乎都按预期工作（每当编辑值，在我的视图模型中更新）。但是当我第二次加载现有数据时，viewmodel没有按预期更新。即使我编辑了数据，视图模型也保持相同的数据。我认为可观察到的工作不正常。明确告诉我到底在做什么错误。

第一次：

function ViewModel() {
    var self = this;

    //Available types - which will come from serverside
    self.typeDropDown = ko.observableArray(InitialData);

    self.typeValue = ko.observable();

//Explicitly Adding new Row
    self.Inputs = ko.observableArray([new Item(self.typeDropDown[0], '', '', '')]);

    self.removeRow = function (Item) {
        self.Inputs.remove(Item);
    },
    self.addNewRow = function () {
        //push will add a new element to the container without modifying much in DOM
        self.Inputs.push(new Item(self.typeDropDown[0], '', '', ''));
    }


function Item(Type, StrData, MaxData, Back) {
    var self = this;
    self.Type = ko.observable(Type),
    self.Storage = ko.observable(StrData),
    self.MaxIOPS = ko.observable(MaxData),
    self.BackupPercentagePerMonth = ko.observable(Back)
}

第二次 - 从服务器加载数据。

来自服务器的示例输入结构：

strJSON = [
   {
       Type: storageInitialData[0].Value,
       Str: '12',
       Max: '156',
       Back: '123'
   },
    {
       Type: storageInitialData[0].Value,
       Str: '12',
       Max: '156',
       Back: '123'
   }, {
       Type: storageInitialData[0].Value,
       Str: '12',
       Max: '156',
       Back: '123'
   }
];


function ViewModel() {
    var self = this;

    //Available types - which will come from serverside
    self.typeDropDown = ko.observableArray(InitialData);

    self.typeValue = ko.observable();

//Explicitly Adding new Row
    self.Inputs = ko.observableArray(strJSON);

    self.removeRow = function (Item) {
        self.Inputs.remove(Item);
    },
    self.addNewRow = function () {
        //push will add a new element to the container without modifying much in DOM
        self.Inputs.push(new Item(self.typeDropDown[0], '', '', ''));
    }

ko.observableArray（strJSON）是否不足以为数组中的元素设置observable属性？我是否需要再次调用Item方法？

更新

我的下拉列表就像这样

<select class="ddText" id="selType" style="width: 100px"
                            data-bind="options:typeDropDown, optionsText: 'Value', optionsValue: 'Value',value : (Type.Value)?Type.Value : Type,attr: { name: 'str',id : 'strType_'+$index()}, uniqueName:true" ">
                        </select>

Answer 1

observableArray中的项目本身不会自动变为可观察的。在将对象添加到Item之前，您必须将对象映射到Inputs。 ko.utils.ArrayMap（或者，如果您可以确定在ES5浏览器中运行，则可以使用内置的map数组方法）。您可能还想查看ko.mapping插件（官方支持）;在您的情况下，它将生成相当于将条目映射到Item s。

从JSON加载值不更新（作为可观察的）Knockout

1 个答案: