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

Updating dynamically generated button text using knockout

本文关键字：按钮 文本 knockout 更新 动态 使用      更新时间：2023-09-26

我正在动态加载数据到网格，我在每一行都有'添加'按钮。

btn = "<a id='btnRow' data-bind='click: function()
    { ClickAdd('"" + rowObject.Id+ "'")}'>" +
    "<i ></i><span data-bind='text:$root.StrResources.BtnAdd'/></a>";
如上面所示，我正在使用data-bind 设置按钮的文本

现在点击按钮，我想把文字从'Add'改为'Selected'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.
};

我该怎么做呢?

你只需将文本绑定到一个可观察对象:

<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/

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

然后我看到你绑定到这些资源，然而你绑定按钮文本的方法是硬编码使用StrResources.BtnAdd资源;如果你将这个可观察对象更新为'Selected'，那么所有绑定到StrResources.BtnAdd的按钮都将变成'Selected'的文本。

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

从你的问题的字里行间看，我在这里实现了一个简单的网格，我认为它符合你的要求:

http://jsbin.com/finucabo/1/edit?html、js、输出

感兴趣的部分是:

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);
        }
    }
};

和binding:

<!-- 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重新计算文本绑定。

希望这对你有帮助。

编辑:

关于能够选择多行，你可以把selected改成一个可观察数组。

我已经在这里更新了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);
        }
    }
};
相关文章：