javascript - Knockout.js 文本将多个属性绑定(bind)到单个 <p> 节点

Question

我需要绑定(bind)一个<p>标记到我的 View 模型中的值。 现在通常这不是问题，但在这种情况下，该值被分成模型内的多个字段，因为它是一个地址。

因此，我将“streetName”和“HouseNumber”作为单独的字段，但它们都需要作为此

标记的一部分显示在 HTML 中。

根据knockout.js的 official documentation :

“绑定(bind)值可以是单个值、变量或文字或几乎任何有效的 JavaScript 表达式。”

现在我注意到那里的“几乎”，所以我有所保留，但是简单的字符串连接应该被认为是“足够简单的操作”，是吗？我需要绑定(bind)我的 <p> 的值标记到模型中两个字符串字段的值，我将使用什么语法，因为我正在尝试的语法不起作用:

<p data-bind="text: dataBind1 + dataBind2"></p>

旁注 dataBind1 和 dataBind2 并不是那么简单，它是一个嵌套函数调用，yadda，yadda，yadda，尽管它们在分开时工作得很好，但我不能，因为我死了才能让它们工作，当我希望它们“在一起”在一个元素中。真正的绑定(bind)值是:

<p data-bind="text: getModelData(processID).Property()[0].Street + getModelData(processID).Property()[0].HouseNumber"></p>

编辑(稍微澄清一下 viewModel 的结构):

View 模型本身是一个 JavaScript 对象 ( var viewModel )，它具有某些方法，例如 getModelData(ID)、updateModelData(ID) 等。这里传递的 ID 是页面不同部分的 Controller 的“唯一 Controller 标识符”。这里有一些 1:1 vs 1:M 的胡言乱语，但这并不相关。 var viewModel接收来自 AJAX 调用的信息，并使用附加属性动态更新自身，基于这些属性将 Controller 插入页面。因此它会具有“uniqueID”属性，这实际上是 knockout 的 View 模型。
这样，所有 View 模型都保存在单个对象的“界面”下。像这样的事情:

  var viewModel = {
        uniqueID: object, //knockout.js viewModel of Controller1
        uniqueID2: object, //knockout.js viewModel of Controller2
        getModelData(processID): function(){
           //does stuff
        }
    }

因此在本例中访问 getModelData(ID).Property()[0].Street与访问 Property()[0].Street 几乎相同在常规的非深层嵌套模型或任何你想称之为的模型中。而knockout对象本身的结构有些类似:

{
    Property: [
    {
        Street: "someStreet1"
        HouseNumber: "someNumber1"
    },
    {
        Street: "someStreet2"
        HouseNumber: "someNumber2"
    },
    {
        Street: "someStreet3"
        HouseNumber: "someNumber3"
    },
    ]

}

Answer 1

您必须发送一个值、函数(返回值)或表达式。

示例:

<p data-bind="text: (dataBind1() + dataBind2())"></p>

这应该导致评估在可观察的更新上重新运行。我只知道少数情况不会。

此外，您可以使用计算值，以保证可观察的更新将重新计算该值。这也使逻辑远离标记，并且更适合较新的浏览器安全策略。请参阅 @Matt.kaaj 对该解决方案的回答。

最后，您可以使用像 span 这样的子元素，它不会影响标记，并且在语义上是最正确的。

<p><span data-bind="text: dataBind1"></span> <span data-bind="text: dataBind2"></span></p>