从外部视图模型中调用knockout.js中的函数

时间:2014-09-25 20:37:21

标签: javascript php cakephp knockout.js

我正在使用CakePHP 2.3.8而我正试图从knockout.js视图模型中调用一个函数,但是我在理解正在发生的事情时遇到了一些麻烦。

如果设置了一个特定的变量(在PHP中),那么我想显示一个div,但是我无法让它工作。当我从PHP代码调用它时,div不会显示,但是方法中的警报消息会触发,因此我知道正在访问代码。

<div data-bind = "visible: someDiv">
    I'm visible
</div>

这是淘汰视图模型

function myViewModel(){

    var self = this;

    self.someDiv = ko.observable(false); //the div starts out hidden

    self.editing = ko.observable(false);

    //if the editing variable is changed, display someDiv
    self.editing.subscribe(function(){
        alert('edit changed'); //this alert triggers every time, even from the PHP call
        self.someDiv(true);  //someDiv only shows if I call from within the view model
    });

    //if I manually change editing to true from within the viewmodel, the div shows
    //self.editing(true);

}
ko.applyBindings(new myViewModel());

这是启动事件序列的PHP代码

echo $this->Html->script('knockout-2.3.0');
echo $this->Html->script('viewmodel');

//if the edit variable is set, the "someDiv" should be set to true
if(isset($edit)){
    <script>
        window.vm = new myViewModel();
        window.vm.editing(true); //this will trigger the alert from the subscribe function, but the div doesn't display
    </script>
}

为什么当我从PHP将编辑值更改为true时div不显示,但是如果我在viewmodel中更改它会显示?

甚至可以做我正在尝试的事情吗?

修改

我在该JS文件中将绑定应用于我的viewmodel。我在PHP文件中再次应用绑定。

我的意思是“变量设置(在PHP中)”是数据源来自PHP,尽管它是JavaScript设置最后的值。我为上面的例子保留了它的简短,所以它真的会是这样的(不是它有很大的不同)

//if the edit variable is set, the "someDiv" should be set to true
if(isset($edit)){
    <script>
        window.vm = new myViewModel();
        window.vm.editing(<?php echo $edit; ?>); //this will trigger the alert from the subscribe function, but the div doesn't display
        window.vm.another(<?php echo $something_else_here; ?>);
    </script>
}

1 个答案:

答案 0 :(得分:1)

  

为什么当我将PHP的编辑值更改为true时,div不会显示,但是如果我在viewmodel中更改它会显示?

我不会在任何地方看到你正在设置它来自php&#39;看来你是从JavaScript设置值。如果window.vm.editing(true);正在触发订阅功能,那么它正在成功运行。那时真正的问题是你确定你只有一个绑定到DOM的VM实例吗?我在代码中的任何地方都没有看到您要应用绑定的内容,那么您是否也可以显示该代码?

我怀疑你的VM实际上看起来像这样 -

function viewModel() {
    // some code
}

ko.applyBindings(new viewModel());

或正在初始化两次。请记住,您需要引用视图模型的相同实例。

window.vm = new myViewModel();
ko.applyBindings(window.vm);

//if the edit variable is set, the "someDiv" should be set to true
if(isset($edit)){
    <script>
        window.vm.editing(true); //this will trigger the alert from the subscribe function, but the div doesn't display
    </script>
}