Question

我希望更新bootstrap javascript按钮中的文本，以显示在我的viewmodel中保存在knockout中的数字。

我可以将按钮上的文本更新为除了observable之外的任何内容，当我将其更改为包含observable时，按钮文本不正确并将observable显示为函数。

用小提琴解释更容易，所以这里有一个简化的例子：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()来访问可观察变量的值。您必须更新代码并使用单击绑定来加载模型数据。这是一个工作小提琴：

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

Bootstrap的Javascript按钮不显示Knockout observable

2 个答案: