使用knockout.js的动态可观测量

Dynamic amount of observables with knockout.js

本文关键字：可观 测量 动态 knockout js 使用      更新时间：2023-09-26

我有一个关于knockout.js库的基本问题。

到目前为止，我正在创建一些类型为number和range的输入字段。

<input type="range" min="0.0" max="1.0" step="0.001" data-bind="value: example1" ></input>
<input type="number" min="0.0" max="1.0" step="0.001" data-bind="value: example1"></input>
<input type="range" min="0.5" max="2.5" step="0.001" data-bind="value: example2" ></input>
<input type="number" min="0.5" max="2.5" step="0.001" data-bind="value: example2"></input>

当激活knockout.js时，我只是在做一些类似的事情

this.example1 = ko.observable("0.000");
this.example2 = ko.observable("0.000");

我的问题是，网站接收到这些输入参数的随机数量。对于一些项目，只有2个类似于我的示例，而其他项目则有8个参数。

如何在淘汰赛中指定这些可观测量的动态量？

谢谢！

编辑：

已解决。

继续选择答案的解决方案：

通过"attr"绑定，我可以为每个输入设置不同的属性值。

<input type="number" step="0.001" data-bind="value: value, attr: {id: name, min: minValue, max: maxValue}"></input>

只需使用一个可观测的可观测数组。创建一个可观察数组，并为server.push（）返回的每个结果在可观察数组中添加一个新的可观察对象或具有可观察对象的对象。

然后在Dom中使用for-each绑定对它们进行迭代并显示每个绑定。

在VM-中

var objectsArray = ko.observableArray();
// results from AJAX or w/e
ko.utils.arrayForEach(results, function (result) {
    objectsArray.push(new ObjectType(result));
});
function ObjectType (data) {
    var self = this;
    self.SomeProperty = ko.observable(data);
}

然后在视图中

<div data-bind="foreach: objectsArray">
    <input data-bind="value: SomeProperty " />
</div>

jsFiddle示例-

http://jsfiddle.net/zabpe3jm/

一方面，JavaScript使在需要时向对象添加属性变得非常容易，因此创建一个准确反映数据的视图模型并不困难。

另一方面，棘手的部分是使用具有data-bind属性的HTML，这将准确地反映动态视图模型。

一个可能的解决方案是将视图模型重构为两个：

function viewModelContainer(arrData) {
    var self = this;
    // this holds a dynamic number of elements, depending upon the data from the server
    self.Observables = ko.observableArray([]);
    // using an IIFE as a type of constructor for getting the 
    // `arrData` param into your observable
    (function(arrData) {
        // add all elements in a single call so that you don't cause
        // multiple unnecessary updates to the UI
        var arr = [];
        for (var i = 0, iMax == arrData.length; i < iMax; i++) {
            arr.push(new viewModelData(arrData[i]));
        }
        self.Observables.push(arr);
    }(arrData));
}

function viewModelData(data) {
    var self = this;
    self.Data = ko.observable(data);
}

因此，现在您有了一个单独的对象/视图模型（viewModelContainer的实例），知道它包含多少值。

下一步是在HTML:中枚举这些（使用Knockout）

<!-- ko foreach: Observables -->
    <input type="range" min="0.0" max="1.0" step="0.001" data-bind="value: Data" ></input>
    <input type="number" min="0.0" max="1.0" step="0.001" data-bind="value: Data"></input>
<!-- /ko -->

我已经根据记忆写下了自由手/，所以你可能需要润色一下，但我希望你能领会要点。

我认为您不想使用observable，而是使用observableArray代替

this.yourObjects = ko.observableArray([]);

然后，假设您有一个包含输入参数的源数组，您只需将它们添加到数组中：

for (var i in sourceArray) {
    this.yourObjects.push(sourceArray[i]);
}

要渲染它，只需使用foreach绑定：

<div data-bind="foreach: yourObjects">
    <input type="range" min="0.0" max="1.0" step="0.001" data-bind="value: $data" ></input>
</div>

请注意，您使用"value:$data"是因为您不想要项目的某些属性，而是想要项目本身（如您的数值）

相关文章：