1

我有一个使用 foreach 绑定到 containerDiv 的 observableArray 绑定。随着新项目被添加到可观察数组中，新的 div 会在容器内创建。

每个动态创建的 div 都可以被点击（或点击），它会显示一种自制的上下文菜单，有几个选项，其中两个是“删除你刚刚点击的 div”ahd“改变你的 div 的值刚刚点击”。

contextmenu 可以确定点击了哪个 div，从而可以确定 observableArray 中的哪个索引必须删除或更改其值。但是上下文菜单是如何将这些信息传回给 ViewModel 的呢？

绑定 context-menu-option 的 click 事件只会告诉 ViewModel 点击了哪个菜单项；它不会显示另一条重要信息，即负责打开上下文菜单的 div，即必须编辑或删除的那个。

如何为 ViewModel 提供 a) 必须发生的特定操作（菜单选项）和 b) 可观察数组中必须执行的项？

4

3 回答 3

0

不确定我是否理解您的问题，但也许这可以帮助您：

function MyVM(){
    var self = this;

    this.divsArray = ko.observableArray([]);

    this.handleDiv = function(div){
        //here you can raise your menu with the data provided from the div
        //in the delete callback of the menu, just pass to it the div object and call self.divsArray.remove(div);
    }
}


View:

<div data-bind = "foreach: divsArray">
     <div id = "foo-child" data-bind = "click: $parent.handleDiv($data)"></div>
<div>
于 2013-09-29T21:21:42.503 回答
0

当您首先单击以调出上下文菜单时，将使用与 div 对应的模型元素调用您的处理程序。保存它，然后在处理上下文菜单中的单击时使用它（必须来自那个特定的 div）。

于 2013-09-29T19:01:20.630 回答
0 
someGlobalNamespace.ContextMenuVM = new function () {
    var self = this;
    var piece = {};
    var args = [];

    self.show = function (data, event) {
        piece = this;
        args = arguments;
        var posx = event.clientX + window.pageXOffset; //Left Position of Mouse Pointer
        var posy = event.clientY + window.pageYOffset; //Top Position of Mouse Pointer
        $('#ContextMenu').popup('open', {
            x:posx,
            y:posy,
            positionTo:'origin'
        });
    };

    self.clickHandler = function(fn){
        return function(){
            $('#ContextMenu').popup('close');
            fn.apply(piece, args);
        };
    };
}();

原谅我使用 JQuery mobile 进行显示/隐藏，这是我在阅读其他答案后解决它的方法。

通过缓存绑定到最初单击/上下文菜单的元素的 vm 和函数参数的“this”，您可以使用 Function.apply 来委托单击。

这可能会导致原始点击处理程序可以检查事件并看到它与点击事件不同的问题，但这可以通过一些小的重构来解决。

   <div id="ContextMenu" class="pieceContextMenu" data-role="popup" data-theme="c" data-dismissible="true">
        <div class="contextMenuItem CIicon Delete"    title="Delete"                data-bind="click: clickHandler(cms.canvasAreaVM.deleteUniformPiece)"><i style="cursor: pointer;" class="fa fa-times"></i><span class="contextMenuItemText">Delete</span></div>
        <div class="contextMenuItem CIicon Copy"      title="Clone"                 data-bind="click: clickHandler(cms.canvasAreaVM.copyFormPiece)"><i class="fa fa-copy"></i><span class="contextMenuItemText">Clone</span></div>
        <div class="contextMenuItem CIicon New"       title="Add new child"         data-bind="click: clickHandler(cms.addNewPieceVM.show)"><i class="fa fa-plus"></i><span class="contextMenuItemText">New</span></div>
        <div class="contextMenuItem CIicon NewParent" title="Add new parent"        data-bind="click: clickHandler(cms.canvasAreaVM.newParentFormPiece)"><i class="fa fa-plus-square"></i><span class="contextMenuItemText">New Parent</span></div>
        <div class="contextMenuItem CIicon CopyClip"  title="Copy to the clipboard" data-bind="click: clickHandler(cms.canvasAreaVM.copyFormPieceToClipboard)"><i class="fa fa-clipboard"></i><span class="contextMenuItemText">Copy</span></div>

    </div>

clickHandler 立即运行，并返回单击时将调用的函数。

于 2017-05-31T04:30:46.173 回答