knockout.js 绑定到静态数据答案

【问题标题】：knockout.js bind to static dataknockout.js 绑定到静态数据
【发布时间】：2012-06-16 04:53:35
【问题描述】：

绑定到现有静态数据的建议方法是什么？我必须将它包含在视图模型中，因为它用于计算值。

<div id="sum" data-bind="text: sum">
</div>
<div class="line">
    dynamic: <span data-bind="text: dynamicValue"></span>
    static: <span data-bind="text: staticValue">312</span>
    <button data-bind="click: getDataFromServer">get data</button>
</div>
<div class="line">
    dynamic: <span data-bind="text: dynamicValue"></span>
    static: <span data-bind="text: staticValue">123</span>
    <button data-bind="click: getDataFromServer">get data</button>
</div>

function SumViewModel(lines){
    this.sum = ko.computed(function(){
        var value = 0;
        $.each(lines, function(index, element){
            var staticValue = element.staticValue();
            if (staticValue)
                value += staticValue;
            var dynamicValue = element.dynamicValue();
            if (dynamicValue)
                value += dynamicValue;
            value += dynamicValue;
        });
        return value;
    });
}

function LineViewModel() {

    this.randomNumber = function(max) {
        return Math.floor((Math.random() * max) + 1);
    };

    this.dynamicValue = ko.observable(0);
    this.staticValue = ko.observable();

    this.getDataFromServer = function() {
        this.dynamicValue(this.randomNumber(300));
    };

};

var lines = [];
$('.line').each(function(index, element) {
    var line = new LineViewModel()
    //line.staticValue(parseInt($('[data-bind*="staticValue"]', element).text()));
    lines.push(line);
    ko.applyBindings(line, element);
});
var sum = new SumViewModel(lines);
ko.applyBindings(sum, $('#sum')[0]);

【问题讨论】：

标签： knockout.js

【解决方案1】：

您可以查看创建自定义绑定，该绑定将初始化 staticValue 可观察对象。这是一个工作小提琴：

http://jsfiddle.net/z2ykC/6/

【讨论】：

感谢您为我指明方向！您对此有何看法：jsfiddle.net/z2ykC/7
好的...如果你真的想从 innerText 读取值，这里有一些调整。 1) 我现在使用发送到 staticText 绑定的字符串参数来动态设置 viewModel 上的该属性。 2）我在绑定中进行解析，而不是求和。 3) 我使用 jQuery 访问文本，因为 .innerText 在 FireFox 中不起作用。 4) staticValue 不再需要是可观察的。 jsfiddle.net/z2ykC/9
也许这超出了范围，但我怎样才能使新绑定适用于字段以及可观察对象？
如果需要，您可以检查静态字段的类型。如果它是一个函数，则将其作为函数调用，而不仅仅是设置值：jsfiddle.net/z2ykC/10

【解决方案2】：

您的视图效率低下，最好使用 foreach 绑定来渲染线条。如果您需要视图模型中的数据，它属于视图模型，或者应该从服务器获取。不要放入视图然后将其提取回来。

function SumViewModel(lines) {
    // ...
    this.lines = lines;
}

function LineViewModel(staticValue) {
    // ...
    this.staticValue = ko.observable(staticValue);
}

var staticValues = [312, 123];
var lines = [];

$.each(staticValues, function(index, value) {
    lines.push( new LineViewModel(value) );
});

ko.applyBindings( new SumViewModel(lines) );

http://jsfiddle.net/z2ykC/5/

【讨论】：

是的，虽然我同意那是最佳选择，但我现在没有这个选项。到目前为止，它也不是最简单的选择。