敲除中的数据绑定不适用于多个属性

Question

我有一个带有数据绑定的以下 div 标签

它给出以下错误

绑定值：visible:showBannerMessage，样式：{backgroundColor: #ffeea8;height: 40px} 消息：无效或意外的令牌

我哪里错了？谢谢

Answer 1

您传递给 style 绑定的值应该是有效的 javascript 对象，而不是 css 字符串。你犯了两个错误：

property: value 对应该由 , 分隔，而不是 ;
字符串值应该用引号引起来。 40px 和 #ffeea8 都应该包裹在 ''.

即正确的绑定是：

/*              comma -------------v                */
style: { backgroundColor: '#ffeea8', height: '40px'  }
/*            quotes -----^-------^----------^----^ */

这是您的错误视图的复制品，显示了您所描述的错误，以及包含对这两个更改的修复的正确视图：

// Wrong view
try {
  ko.applyBindings({
    showBannerMessage: true
  }, document.getElementById("wrong"));
} catch(err) {
  console.log("error:", err.message);
}

// Right view:
ko.applyBindings({
  showBannerMessage: true
}, document.getElementById("right"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<!-- with errors -->
<div id="wrong" data-bind="visible:showBannerMessage, style:{backgroundColor: #ffeea8; height: 40px}">Hello world</div>

<!-- without errors -->
<div id="right" data-bind="visible:showBannerMessage, style:{ backgroundColor: '#ffeea8', height: '40px' }">Hello world</div>

敲除中的数据绑定不适用于多个属性

Data bind in knockout is not working for multiple attributes

knockout.js

knockout-validation

knockout-3.0