Javascript 从单独的js文件提交时，如何嵌套knockoutjs？

我有一个html文件，包括几个js文件。这些js文件有敲除VideModel，我需要将它们嵌套在html文件中进行绑定

以下是一个示例：

HTML

我得到这个错误：

未捕获引用错误：无法处理绑定“html:函数” （）{return color}消息：未定义颜色

---

我怎样才能解决这个问题？谢谢

嗯，我有两种方法可以解决这个问题。然而，在这两种解决方案中，js文件的顺序都很重要（不确定它对您是否有意义）

将颜色融入到人身中 用于内部html块：

标记：

<div id="container1">
    <span data-bind="html: name"></span>
    <!--with binding to set context-->
    <div data-bind="with: colors">
        <span data-bind="html: color"></span>
    </div>
</div>

<div id="container1">
    <span data-bind="html: name"></span>
    <!--separate component as inner element-->
    <colors></colors>
</div>

第二个文件：

var Person = function() {
    return {
       name: ko.observable("John"),
       // Create new instance of colors inside your person view model.
       colors: new Colors()
    };
};
ko.applyBindings(new Person(), document.getElementById("container1"));

var Person = function() {
    return {
       name: ko.observable("John")
    };
};
ko.applyBindings(new Person(), document.getElementById("container1"));

将组件用于内部html 您可以使用来分离页面上特定块的逻辑。我更喜欢这个解决方案，使应用程序更具可扩展性

标记：

<div id="container1">
    <span data-bind="html: name"></span>
    <!--with binding to set context-->
    <div data-bind="with: colors">
        <span data-bind="html: color"></span>
    </div>
</div>

<div id="container1">
    <span data-bind="html: name"></span>
    <!--separate component as inner element-->
    <colors></colors>
</div>

---

嗯，我有两种方法可以解决这个问题。然而，在这两种解决方案中，js文件的顺序都很重要（不确定它对您是否有意义）

将颜色融入到人身中 用于内部html块：

标记：

<div id="container1">
    <span data-bind="html: name"></span>
    <!--with binding to set context-->
    <div data-bind="with: colors">
        <span data-bind="html: color"></span>
    </div>
</div>

<div id="container1">
    <span data-bind="html: name"></span>
    <!--separate component as inner element-->
    <colors></colors>
</div>

第二个文件：

var Person = function() {
    return {
       name: ko.observable("John"),
       // Create new instance of colors inside your person view model.
       colors: new Colors()
    };
};
ko.applyBindings(new Person(), document.getElementById("container1"));

var Person = function() {
    return {
       name: ko.observable("John")
    };
};
ko.applyBindings(new Person(), document.getElementById("container1"));

将组件用于内部html 您可以使用来分离页面上特定块的逻辑。我更喜欢这个解决方案，使应用程序更具可扩展性

标记：

<div id="container1">
    <span data-bind="html: name"></span>
    <!--with binding to set context-->
    <div data-bind="with: colors">
        <span data-bind="html: color"></span>
    </div>
</div>

<div id="container1">
    <span data-bind="html: name"></span>
    <!--separate component as inner element-->
    <colors></colors>
</div>

---

我不熟悉在视图模型中使用匿名对象。你能试着将你的JS移到html的下方或上方，看看这是否会有所不同吗？我不熟悉在视图模型中使用匿名对象。你能试着将你的JS移到html的下方或上方，看看这是否会有所不同吗？谢谢你的帮助！！“组件”方式看起来是一种可能的解决方案——我将对此进行测试。再次感谢。：）感谢您的精心帮助！！“组件”方式看起来是一种可能的解决方案——我将对此进行测试。再次感谢。：）