Working Demo in jsFiddle

Question

我正在尝试将淘汰出价应用于模态弹出窗口。

我有f strong ViewModel ：

var ViewModel = function () {
    var self = this;
    self.radioSelectedOption = ko.observable("optionFreeText");


    // It only show textarea when free text message option value is selected
    self.hasFreTextMessageSelected = ko.computed(function () {
        return (self.radioSelectedOption() === "optionFreeText");
    });    
}

以下 HTML模式：

<section id="test-modal" class="modal fade" tabindex="-1" data-width="760">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title">Enviar Mensagem</h4>
    </div>
    <div class="modal-body">
        <div class="form-body">
            <div class="form-group">
                <label>Tipo de Mensagem</label>
                <div class="radio-list">
                    <label class="radio-inline">
                        <input type="radio"  data-bind="checked: radioSelectedOption" name="optionsRadiosMessageType" id="optionRadioFreeText" value="optionFreeText" class="make-switch optionsRadiosMessageType" checked>
                        Livre
                    </label>
                    <label class="radio-inline">
                        <input type="radio"  data-bind="checked: radioSelectedOption" name="optionsRadiosMessageType" id="optionRadioStateRefresh" value="optionStateRefresh" class="make-switch optionsRadiosMessageType">
                        Pedido de Estado
                    </label>
                </div>
            </div>
            <div for="textareaFreeText" class="form-group" data-bind='visible: hasFreTextMessageSelected'>
                <label>Texto</label>
                <textarea id="textareaFreeText" class="form-control" rows="3"></textarea>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-default">Cancel</button>
        <button type="button" class="btn blue">Enviar</button>
    </div>
</section>

然后在 on document ready ：

上

ko.applyBindings(new ViewModal());

当我第一次运行代码时它完美地工作但是在第一次模态处理后它停止工作。 ViewModel在第一次处理后永远不会更新，但我可以获得旧值。

它看起来像是被删除的绑定（但它不是）。如果我再次尝试绑定它，我得到了敲门异常“你不能多次将绑定应用于同一个元素”...

Answer 1

我认为你这里有很多拼写错误，它们会破坏Knockout绑定。

例如：

您定义var ViewModel = function () {...}
- 但随后传入ko.applyBindings(new ViewModal());
您的视图模型使用可观察的self.radioSelectedOption
- 但您的数据绑定使用data-bind="checked: radioSelectedOptionMessage"
在ViewModel中，检查单选按钮是否具有值(self.radioSelectedOption() === "optionPreDefined"
- 但该值未在您的标记中的任何位置定义。

一旦你解决了这些问题，生成的代码应该可以运行：

Working Demo in jsFiddle

此外，在使用var self = this技巧时，您不必将this作为第二个参数传递给计算属性。

在bootstrap模式中对knockoutjs ViewModel应用绑定

1 个答案:

Working Demo in jsFiddle