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

Applying binding to knockoutjs ViewModel in a bootstrap modal

本文关键字：ViewModel 应用 绑定 knockoutjs bootstrap 模态      更新时间：2023-09-26

我正试图将淘汰赛竞标应用于模态弹出窗口。

我有家禽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 Modal:

<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在第一次处理后永远不会更新，但我可以获得旧值。

看起来好像绑定被删除了(但实际上没有)。如果我试图再次绑定它，我得到了knockout异常"你不能对同一元素多次应用绑定"…

我想你这里有很多错别字，容易破坏Knockout绑定。

例如:

  1. 您定义var ViewModel = function () {...}
    • 然后通过ko.applyBindings(new ViewModal());
  2. 你的视图模型使用可观察对象self.radioSelectedOption
    • 但是您的数据绑定使用data-bind="checked: radioSelectedOptionMessage"
  3. 在ViewModel中，检查单选按钮的值是否为(self.radioSelectedOption() === "optionPreDefined"
    • 但是这个值在你的标记中没有定义。

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

在jsFiddle

中的工作演示

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

相关文章：