Question

我正在动态地将数据加载到网格中，并且我正在添加＆＃39;每一行按钮。

btn = "<a id='btnRow' data-bind='click: function()
    { ClickAdd(\"" + rowObject.Id+ "\")}'>" +
    "<i ></i><span data-bind='text:$root.StrResources.BtnAdd'/></a>";

如上所示我正在使用data-bind

设置按钮的文本

现在点击按钮，我想更改“添加＆＃39;选择＆＃39;选择＆＃39; 我在javascript对象中有属性

StrResources: {
    BtnView: ko.observable("View"),
    BtnAdd: ko.observable("Add"),
    BtnSelected: ko.observable("Selected"),
},

在java脚本对象中，我确实有执行添加操作的方法

empObject.ViewModel.ClickAdd = function (objectDN, objectName) {
    // here i want to write code to change the text.
};

我该怎么做？

Answer 1

您只需将文本绑定到observable：

<button data-bind="click: changeButtonText, text: buttonText"></button>

然后在点击功能中，您将更改文字：

var Row = function(row) {
    var self = this;

    self.buttonText = ko.observable('Add');

    self.changeButtonText = function() {
        self.buttonText('Selected');
    };
};

http://jsfiddle.net/Wk7dr/3/

Answer 2

我看到你在尝试什么，但我不确定这是正确的做事方式。您的资源对象包含一些可观察对象，但可观察点的一点是，当您更改它们时，先前绑定的UI会发生变化以反映可观察对象中的更改。我的困惑是你的资源应该是静态的。

然后我看到你绑定了那些资源，但你的按钮文本绑定方法被硬编码为使用StrResources.BtnAdd资源;如果您将该observable更新为'Selected'，那么绑定到StrResources.BtnAdd的所有按钮将更改为具有'Selected'文本。

您真正需要的是一种为每个按钮指定文本的方法，而不是将所有按钮绑定到一个可观察对象。

在问题的各行之间阅读，我实施了一个我认为符合您要求的simple grid here：

http://jsbin.com/finucabo/1/edit?html,js,output

感兴趣的部分是：

var model = {
    grid: {
        row: ko.observableArray(),

        selected: ko.observable()
    },

    buttonText: function (row) {
        return model.grid.selected() === row ? 'Selected' : 'Add';
    },

    buttonClick: function (row) {
        if (model.grid.selected() === row) {
            model.grid.selected(null);
        } else {
            model.grid.selected(row);
        }
    }
};

和绑定：

<!-- ko foreach: grid.row -->
<tr>
    <td data-bind="text: first"></td>
    <td data-bind="text: last"></td>
    <td data-bind="text: email"></td>
    <td>
        <button
            type="button"
            data-bind="click: $root.buttonClick, text: $root.buttonText($data)">                    
        </button>
    </td>
</tr>
<!-- /ko -->

请注意，单击该按钮只会将当前行存储到model.grid.selected可观察对象中。这将导致buttonText重新评估文本绑定。

希望这对你有所帮助。

修改

关于能够选择多行，您只需将所选行更改为可观察数组。

我在这里更新了jsbin：http://jsbin.com/finucabo/2/edit

变化是：

// Helper function added. function arrayContains(anArray, aValue) { return ko.utils.arrayFirst(anArray(), function (v) { return v === aValue; }) !== null; } var model = { grid: { row: ko.observableArray(), // Now using an observable array. selected: ko.observableArray() }, buttonText: function (row) { // Modify to use observable array. return arrayContains(model.grid.selected, row) ? 'Selected' : 'Add'; }, buttonClick: function (row) { // Modify to use observable array. if (arrayContains(model.grid.selected, row)) { model.grid.selected.remove(row); } else { model.grid.selected.push(row); } } };

使用knockout更新动态生成的按钮文本

2 个答案: