0

我想让我的淘汰赛脚本更有条理，此外，我想避免意外地将 2 个函数命名为相同的东西。所以我想知道我是否可以像这样将视图模型嵌套在同一个函数中（我保持非常简单）：小提琴

这是HTML

<p>First name: <strong data-bind="text: other.firstName">todo</strong></p>
<p>Last name: <strong data-bind="text: other.lastName">todo</strong></p>
<p>Full name: <strong data-bind="text: other.fullName">todo</strong></p>

和JS：

function AppViewModel() {
    var self = this;
    self.other = {
        firstName: ko.observable("Bert"),
        lastName: ko.observable("Bertington"),
        /*fullName: ko.computed(function(){
            return this.firstName + " " + this.lastName;
            }, this)*/

        }
}

这工作正常，但如果我取消注释 ko.computed 它会崩溃。有没有办法以这种方式组织我的淘汰赛，为什么计算会崩溃，有没有办法编写 ko.computed 函数以便它可以工作？

编辑：问题 #2

如果我有这样的表格：

<form data-bind="submit: other.otherSubmit" data-ajax="false">
    <button type="submit">Submit</button>
</form>

我为提交添加了一个处理程序，如下所示：

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
    function AppViewModel() {
        var self = this;
        self.other = new function(){     
            var self = this;
            self.firstName = ko.observable("Bert");
            self.lastName = ko.observable("Bertington");
            self.fullName = ko.computed(function(){            
                return self.firstName() + " " + self.lastName();
                });
            self.otherSumbit = function(){}
            }
    }

// Activates knockout.js
ko.applyBindings(new AppViewModel());

为什么错误控制台会返回这个：

提交绑定的值必须是函数

4

4 回答 4

2

可以试试这个：

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
    function AppViewModel() {
        var self = this;
        self.other = new function(){     
            var self = this;
            self.firstName = ko.observable("Bert");
            self.lastName = ko.observable("Bertington");
            self.fullName = ko.computed(function(){            
                return self.firstName() + " " + self.lastName();
                });        
            }
    }

// Activates knockout.js
ko.applyBindings(new AppViewModel());
于 2013-02-21T02:05:30.590 回答
1

第一种情况的问题是在那种情况下，this指的是视图模型。在您的对象字面量中，您的对象还不存在，因此您将无法以这种方式设置您的计算 observable。您必须在创建对象后将其添加到对象中。

要么像这样（这很丑陋）：

function AppViewModel() {
    var self = this;
    self.other = {
        firstName: ko.observable('Bert'),
        lastName:  ko.observable('Bertington')
    };
    self.other.fullName = ko.computed(function() {
        return this.firstName() + ' ' + this.lastName();
    }, self.other);
}

或者像这样（就像你在第二个例子中所做的那样）：

function AppViewModel() {
    var self = this;
    self.other = new function() {
        this.firstName = ko.observable('Bert');
        this.lastName = ko.observable('Bertington');
        this.fullName = ko.computed(function() {
            return this.firstName() + ' ' + this.lastName();
        }, this);
    };
}

当然，您可以通过其他方式编写上述示例，但您明白我的意思。

在你的第二个例子中，你只是拼错了你的函数。在视图模型中，它otherSumbit在您的视图拥有它时被命名otherSubmit。

于 2013-02-21T02:51:07.700 回答
0

我使用淘汰赛来组织我的虚拟机的一种技术：

//load view
    $.get(url, function(view){
        $("#content').html(view);
        ko.applyBindings(new myVM(), $('#content')[0]);
    })
于 2013-02-21T02:28:10.753 回答
0

如果有人正在寻找这种解决方案的解决方案，请尝试以下方法

html视图

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="container1">
        <ul>
            <li >Container1 item</li>
            <!-- ko foreach: myItems -->
            <li>Item <span data-bind="text: $data"></span></li>
            <!-- /ko -->
        </ul>
    </div>

    <div id="container2">
        <ul>
            <li >Container2 item</li>
            <!-- ko foreach: myItems -->
                <li>Item <span data-bind="text: $data"></span></li>
            <!-- /ko -->
        </ul>
    </div>

    <script src="js/jquery-1.11.1.js"></script>
    <script src="js/knockout-3.0.0.js"></script>
    <script src="js/DataFunction.js"></script>
    <script src="js/Container1ViewModel.js"></script>
    <script src="js/Container2ViewModel.js"></script>

</body>
</html>

对于这个视图，我在两个单独的 javascript 文件中为 id=container1 和 id=container2 创建了 2 个视图模型。

Container1ViewModel.js

function Container1ViewModel()
{
    var self = this;
    self.myItems = ko.observableArray();
    self.myItems.push("ABC");
    self.myItems.push("CDE");

}

Container2ViewModel.js

function Container2ViewModel() {
    var self = this;
    self.myItems = ko.observableArray();
    self.myItems.push("XYZ");
    self.myItems.push("PQR");

}

然后在这两个视图模型在 DataFunction.js 中注册为单独的视图模型之后

var container1VM;
var container2VM;

$(document).ready(function() {

    if ($.isEmptyObject(container1VM)) {
        container1VM = new Container1ViewModel();
        ko.applyBindings(container1VM, document.getElementById("container1"));
    }

    if ($.isEmptyObject(container2VM)) {
        container2VM = new Container2ViewModel();
        ko.applyBindings(container2VM, document.getElementById("container2"));
    }
});

像这样，您可以为单独的 div 添加任意数量的视图模型。但请确保不要为已注册 div 中的 div 创建单独的视图模型。

于 2015-08-12T19:32:40.880 回答