Question

我想将按钮的值绑定到我的空白视图模型，我该怎么做？我做了这个 fiddle 来展示我想要实现的目标。

这是我的Viewmodel：

var CustomerSearchViewModel = {
    SearchType: ko.observable(""),
    SearchString: ko.observable("");
}

$(document).ready(function () {
    ko.applyBindings(CustomerSearchViewModel);
});

以下是我尝试进行数据绑定的方法：

<button type="button" data-bind='value: SearchType, valueUpdate: "afterkeydown"' value="0" class="btn" data-toggle="button">Company Name</button>

Answer 1

有多种方法可以解决这个问题，但是如何尝试将value绑定与按钮一起使用将无法正常工作。

在HTML中需要最少修改的最简单的解决方案之一是使用click绑定并在事件处理程序中设置SearchType：

var CustomerSearchViewModel = {
       SearchType: ko.observable(""),
       SearchString: ko.observable(""),
       setSearchType : function(data, element)
       {           
           this.SearchType($(element.target).val());
       }
   };

然后你的按钮应如下所示：

<button type="button" data-bind='click: setSearchType'
        value="0" class="btn" data-toggle="button">Company Name</button>

演示JSFiddle。

Answer 2

我建议像这样创建你的模型：

function CustomerSearchViewModel = {
    SearchType: ko.observable(""),
    SearchString: ko.observable(""),
    UpdateSearch: function(data, event) {
        this.SearchType($(event.target).val());
        this.SearchString($(event.target).attr('searchString'));
    }
}

$(document).ready(function () {
    ko.applyBindings(CustomerSearchViewModel);
});

然后在绑定中添加单击事件以使用名为SearchString的自定义属性更新searchString。像这样：

<button type="button" data-bind='click: UpdateSearch' searchString="Company Name" class="btn" value="0" data-toggle="button">Company Name</button>

数据绑定按钮值查看模型KnockoutJS

2 个答案: