在KnockoutJS中使用bootstrap模式

时间:2017-05-24 20:05:28

标签: javascript jquery twitter-bootstrap knockout.js

我很难搞清楚如何做到这一点。我有一个附加到输入表的KnockoutJS视图模型。当每行中的第一个输入模糊时,我会弹出一个模态,询问用户一个问题。如果他们回答“否”,焦点需要回到原始输入。如果'是',焦点应跳转到行中的下一个输入。我不确定如何将来自knockoutJS的输入ID传递给模态并再次退出。或者,如果有更好的方法可以做到这一点。

带有模糊功能的输入的HTML:

<td data-bind="css: { highlighted: $root.highlightedRowIndex() == $index() }">
  <input type="text" data-bind="value: itemNo, insertPress: $index, deletePress: $index, hasFocus: invalidItemNum, selected: invalidItemNum, event: { blur: function(){ $parent.checkItemNo($data, $index); } }, attr: { name: 'sellerItems[' + $index() + '].itemNo', id: 'sellerItems_' + $index() + '__itemNo', tabindex: 5 + $index() }" class="form-control" />
</td>

以及相关的KO:

self.checkItemNo = function(data, index) {
                console.log(data);
                var itemNo = $.trim(data.itemNo());
                if(verify == "False") {                    
                    ......
                } else {
                    if(!foundItem && itemNo != "") {
                        $('#invalidItemMsg').html("Item number <strong>" + itemNo + "</strong> is not a valid item number.  Would you like to report it?")
                        $('#invalidItemNum').val(itemNo);
                        $('#invalidItemModal').modal('show');
                    }
                }
            };

然后我的JS模态按钮点击事件(模态中的&#39;是&#39;按钮):

$('#reportItem').click(function() {
            $('#invalidItemModal').modal('hide');
            // ??? - go to next knockout input from previous input that was blurred
        });

0 个答案:

没有答案