引导的JavaScript按钮不会显示淘汰赛观察到

Question

我想在引导JavaScript的按钮进行更新，以显示保持在我的视图模型观察到淘汰赛数字的文本。

我可以更新按钮上的文字是，除了可观察到的东西，当我改变它含有可观的，按钮上的文字是不正确的，并显示可观察到的一个功能。

它很容易与小提琴所以这里说明的是一个简单的例子：http://jsfiddle.net/rswailes/JxHwy/

HTML

<button 
    id="download-file" 
    data-loading-text="Updating totals..." 
    data-bind="attr: {'data-complete-text' : 'Download lines: '+total , 
         'data-finished-text' : 'done' }" 
    autocomplete="off" 
    class="btn btn-small download-file" 
    type="button">Download file</button> 

<p> 
Total: <span data-bind="text: total"></span> 
</p> 

JAVASCRIPT

var ViewModel = function(){ 
    var self = this; 
    this.total = ko.observable(); 

    this.loadModel = function(){ 
     $('#download-file').button("loading"); 
     this.total(10); 
     $('#download-file').button("complete"); // this is the line I would like to work but does not work 
     //$('#download-file').button("finished"); // if you uncomment this line you will see this line works fine 
    }; 
}; 


viewModel = new ViewModel(); 
ko.applyBindings(viewModel); 
viewModel.loadModel(); 

谁能告诉我这是为什么发生的，如果什么我想做的可能吗？

编辑：我试过total()建议如下，然后我得到“Download lines: undefined”的按钮。

Answer 1

要获得可观察到的值，就需要调用它像total()功能。

如果你只是通过一个简单的属性/可观察像total内置的绑定将照顾为你做这个。但是，如果在表达式中使用它，则需要将它作为函数自己调用，如"Download lines: " + total()

Answer 2

您应该使用total()来访问observable变量的值。您必须更新您的代码并使用点击式绑定来加载您的模型数据。这里有一个工作小提琴：

http://jsfiddle.net/JxHwy/3/