代码之家 › 专栏 › 技术社区 › Sam Holder Brian Adams

我可以让淘汰从其他绑定中的值生成绑定吗?

knockout.js data-binding javascript

Sam Holder Brian Adams · 技术社区 · 12 年前

询问后 this question 得到一个答案,我有一个模态形式,它的内容数据绑定到一个淘汰模型。这很好,并且使其通用和可重用,只要表单遵循与模板相同的模式,即几个按钮和固定的主体。

我想要的是使主体动态,并包含绑定到视图模型上其他值的输入字段。

所以我有这个:

<script id="myModal" type="text/html">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-bind="click:close" aria-hidden="true">&times;</button>
                <h3 data-bind="html:header"></h3>
            </div>
            <div class="modal-body">
                Name:<input type="text" data-bind="value: paramName" /><br/>
                Type:<input type="text" data-bind="value: paramType" /><br />
            </div>
            <div class="modal-footer">
                <a href="#" class="btn" data-bind="click:close,html:closeLabel"></a>
                <a href="#" class="btn btn-primary" data-bind="click:action,html:primaryLabel"></a>
            </div>
        </div>
    </div>
</script>

其扩展了表单以包括多个文本输入字段。我是否可以使此正文内容仍然从视图模型填充,但仍然具有数据绑定。所以有一个看起来像这样的vierw模型:

modal = {
    header: ko.observable("This is a modal"),
    body: ko.observable("Name:<input type='text' data-bind='value: paramName' /><br/>Type:<input type='text' data-bind='value: paramType' /><br />"),
    paramName: ko.observable(),
    paramType: ko.observable(),
    closeLabel: "Cancel",
    primaryLabel: "Ok",
    show: ko.observable(false), /* Set to true to show initially */
    onClose: function () {
        self.onModalClose();
    },
    onAction: function () {
        if (self.modal.paramName() && self.modal.paramType()) {
            self.nextParameter.name(self.modal.paramName());
            self.nextParameter.type(self.modal.paramType());
            self.addInputParameter();
            self.modal.show(false);
        }            
    }

然后让模板恢复为通用模板

<script id="myModal" type="text/html">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-bind="click:close" aria-hidden="true">&times;</button>
                <h3 data-bind="html:header"></h3>
            </div>
            <div class="modal-body" data-bind"html: body">
            </div>
            <div class="modal-footer">
                <a href="#" class="btn" data-bind="click:close,html:closeLabel"></a>
                <a href="#" class="btn btn-primary" data-bind="click:action,html:primaryLabel"></a>
            </div>
        </div>
    </div>
</script>

但仍然对第一个输入进行敲除绑定更改 paramName 并将第二输入改变为 paramType

1 回复 | 直到 9 年前

Sam Holder Brian Adams 12 年前

我将使用一个动态模板来处理这个问题,如注释5所述 here 。所以它看起来像这样:

modal = {
    header: ko.observable("This is a modal"),
    //this is now just the name of the template
    body: ko.observable('bodyTemplateA'),
    // ...
};

然后在你的束缚中

<div class="modal-body" data-bind="template: { name: body }">
</div>

当然,然后分别定义所有需要的模板:

<script id="bodyTemplateA" type="text/html">
     Name:<input type="text" data-bind="value: paramName" /><br/>
     Type:<input type="text" data-bind="value: paramType" /><br />
</script>

这并不是你想要的,但我认为这将比在代码中保持所有不同的ko-bound html字符串更容易维护。