使用knockoutjs的模板绑定设计的模式-Java 学习之路

我们的情况如下：

搜索面板有一组数据，它在几个页面中调用，包含不同类型的组件和位置 . 可以有组合框，单选按钮，输入框和按钮 .

Knockout具有模板绑定功能，我们可以灵活地使用映射到MOdel的html中的模板在条件下显示多个面板 .

以下是代码和模式：

HTML：

<div id="content-wrapper">
    <div class="spacer"></div>
    <div>
        <table class="data-table">
            <thead>
                <tr>
                    <th colspan="4"> Search </th>
                </tr>
            </thead>
            <tbody data-bind="foreach: preSearchData" >
                <tr>
                    <!-- ko template: { name: 'label_' + templateName()} -->
                    <!-- /ko -->

                </tr>               
            </tbody>
        </table>
    </div>

</div>

<script type="text/html" id="label_Combo">
    <td>It is a Combo </td>
</script>

<script type="text/html" id="label_Number">
    <td>
       It is a Number
    </td>
</script>

型号：

Models.Components = function(data) {

            var self = this;
            self.number = data.number;
            self.labelCd = data.labelCd;
            self.xmlTag = data.xmlTag;
            self.Type = new Cobalt.Models.Type(data.Type);

        };

        Models.Type = function(data) {

            var self = this;
            self.component = data.component;
            self.records = data.records;
            self.minLength = data.minLength;
            self.maxLength = data.maxLength;
            self.defaultValue = data.defaultValue;
            self.targetAction = data.targetAction;

        };
Models.ComponentType = function (paymentTypeCode, data, actionId) {

            var ret;
self.templateName(data.component);
            if (!data || (actionId === Cobalt.Constant.Dashboard.copyProfile))
                data = {};

            if (paymentTypeCode == Cobalt.Constant.Dashboard.creditCard)
                ret = new Cobalt.Models.CreditCardPaymentType(data.cardHolderName, data.cardNumber, data.cardExpireDate);

            else if (paymentTypeCode == Cobalt.Constant.Dashboard.dd)
                ret = new Cobalt.Models.DDPaymentType(data.pinNumber);

            else if (Cobalt.Utilities.startsWith(paymentTypeCode, Cobalt.Constant.Dashboard.yahooWallet)) {
                if (!data && paymentTypeCode.indexOf('~') > -1) {
                    data.payCode = paymentTypeCode.substr(paymentTypeCode.indexOf('~') + 1, paymentTypeCode.lastIndexOf('~'));
                    data.billingAgentId = paymentTypeCode.substr(paymentTypeCode.lastIndexOf('~') + 1);
                }

                ret = new Cobalt.Models.WalletPaymentType(data.payCode, data.billingAgentId);
            }
            else if (paymentTypeCode == Cobalt.Constant.Dashboard.ajl) {
                ret = new Cobalt.Models.DDPaymentType(data.pinNumber);
            }

            else
                ret = data || {};

            return ret;
        };

Models.POCModel = function () {
            var self = this;
             self.templateName = ko.observable();
            self.preSearchData = ko.observableArray([]);

            self.getResultData = function () {
                var data = Cobalt.Data.getResultData();
                var componentList = data.componentList;


                self.preSearchData(componentList);
            };
        };

上面的代码给我一个错误说：

Ajax错误：parsererror（错误：无法解析绑定 . 消息：ReferenceError：未定义templateName;绑定值：template：{name：'label_'templateName（）}）cobalt.init.js：66

2 回答

0
这不是您问题的直接答案，但它显示了使用ViewModel类型查找视图的另一种方法（模板）

http://jsfiddle.net/nmLsL/2

每种类型的编辑器都是ViewModel
```
MyApp.Editors.BoolViewModel = function(data) {
    this.checked = data;
};
MyApp.Editors.BoolViewModel.can = function(data) {
    return typeof data === "boolean";
};
```
它有一个can函数，可以确定它是否可以编辑该值

然后我使用名为Knockout.BindingConventions的库来查找连接到ViewModel的模板

https://github.com/AndersMalmgren/Knockout.BindingConventions/wiki/Template-convention
回复于 2024-05-14T13:20:22+08:00
0
您的 foreach 绑定会创建一个子绑定上下文，该上下文不包含 templateName ，因为它是父级的一部分 . 替换为
```

```
回复于 2024-05-14T13:20:22+08:00

使用knockoutjs的模板绑定设计的模式

HTML：

型号：

2 回答

相关问题