3

既存の静的データにバインドするための推奨される方法は何ですか? 計算値で使用されるため、これをビューモデルに含める必要があります。

http://jsfiddle.net/z2ykC/4/

<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>

</p> 

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]);

</p>

4

2 に答える 2

2

staticValue オブザーバブルを初期化するカスタム バインディングの作成を検討できます。これが実用的なフィドルです：

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

于 2012-06-13T10:35:37.250 に答える
1

ビューは非効率的です。 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/

</p>

于 2012-06-13T09:50:47.367 に答える