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

【问题标题】：Data-Bind button Value to View Model KnockoutJS数据绑定按钮值以查看模型 KnockoutJS
【发布时间】：2013-02-08 15:17:21
【问题描述】：

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

这是我的视图模型：

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>

【问题讨论】：

标签： knockout.js

【解决方案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.

【讨论】：

【解决方案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>

【讨论】：