在knockout.js中从外部视图模型调用函数 [英] Calling function in knockout.js from outside view model

问题描述

我使用CakePHP 2.3.8，我试图从一个knockout.js视图模型中调用一个函数，但我有一些麻烦了解发生了什么。

I'm using CakePHP 2.3.8 and I'm trying to call a function from within a knockout.js view model, but I'm having some trouble understanding what's going on.

如果设置了一个特定的变量（在PHP中），那么我想显示一个div，但是我无法使用它。当我从PHP代码调用它时，div不显示，但是方法中的警告消息触发，所以我知道正在达到代码。

If a specific variable is set (in PHP), then I want to display a div but I'm having trouble getting it to work. When I call it from the PHP code, the div doesn't display, however an alert message from within the method triggers so I know that code is being reached.

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

这里是knockout viewmodel

Here's the knockout viewmodel

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代码

Here's the PHP code that initiates the sequence of events

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中改变它显示？

Why is it when I change the editing value to true from PHP the div doesn't display, but if I change it from within the viewmodel it displays?

是否可以做我想做的事？

Is it even possible to do what I'm attempting?

编辑

我在JS文件中对我的viewmodel应用绑定。我不在PHP文件中再次应用绑定。

I am applying bindings to my viewmodel in that JS file. I am not applying bindings again in the PHP file.

我的意思是变量设置（在PHP中）的数据源自PHP，虽然是JavaScript设置的值到底。

What I mean from "variable is set (in PHP)" is that the source of the data originates from PHP, although it is JavaScript setting the value in the end. I kept it short for my example above, so really it would be like this (not that it makes much of a difference)

//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>
}

推荐答案

为什么我从PHP将编辑值更改为true的div不显示，但如果我从viewmodel中改变它显示？

Why is it when I change the editing value to true from PHP the div doesn't display, but if I change it from within the viewmodel it displays?

我没有看到任何地方，你设置它'从php'似乎你设置的值从JavaScript。如果 window.vm.editing（true）; 正在触发subscribe函数，那么它工作正常。这一点的真正问题是，你确定你只有一个VM的实例绑定到DOM？我在你的代码中没有看到你正在应用绑定，所以你可以显示这个代码吗？

I don't see anywhere that you are setting it 'from php' it seems you are setting the value from JavaScript. If window.vm.editing(true); is firing the subscribe function then it is working successfully. The real question at that point is are you sure that you only have one instance of the VM that is being bound to the DOM? I don't see anywhere in your code where you are applying bindings at all so could you show that code as well?

我怀疑你的VM实际上是这样 -

I suspect your VM actually looks something like this -

function viewModel() {
    // some code
}

ko.applyBindings(new viewModel());

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

Or is being initialized twice. Remember that you need to reference the same instance of your view model.

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>
}

这篇关于在knockout.js中从外部视图模型调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！