knockout.js綁定到靜態數據

建議如何綁定到現有的靜態數據？我必須將它包含在視圖模型中，因爲它在計算值中使用。knockout.js綁定到靜態數據

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

來源

2012-06-13 MatteS

你可以考慮創建一個自定義綁定，這將初始化staticValue觀察到。這裏是工作提琴：

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

來源

2012-06-13 10:35:37

謝謝你指出我的方向！你怎麼看待這個問題：http://jsfiddle.net/z2ykC/7/ – MatteS

好吧......如果你真的想從innerText中讀取數值，這裏有一些調整。 1）我現在使用發送給staticText綁定的字符串參數在viewModel上動態設置該屬性。 2）我在綁定內部進行解析，而不是總和。 3）我使用jQuery來訪問文本，因爲.innerText在FireFox中不起作用。 4）staticValue不再需要是可觀察的。 http://jsfiddle.net/z2ykC/9/ –

也許這是失控的範圍，但如何讓這個新的綁定工作，與藏漢領域作爲觀測？ – MatteS

你的觀點是低效的，更好的使用foreach結合渲染線。如果您需要viewmodel中的數據，它屬於視圖模型，或者應該從服務器獲取數據。不要放在視圖中並將其解壓回來。

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/

來源

2012-06-13 09:50:47 Niko

是的，雖然我同意，這將是最佳的，我沒有這種選擇現在。它迄今爲止也不是最簡單的選擇。 – MatteS

knockout.js綁定到靜態數據

回答

相關問題