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

Question

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

我有fowlling 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>

然后在准备文件的情况下 ：

ko.applyBindings(new ViewModal());

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

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

Answer 1

我认为你这里有很多错别字，往往会打破Knockout绑定。

例如：

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

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

在jsFiddle工作演示

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