javascript - knockout 目标

Question

我想知道是否可以使用 knockout 来更改html中的目标(<div data-bind="这里我想用JS更改目标"></div>)

我的所有其他信息都在 JavaScript 中，所以这对我来说是一个大问题。这是我的 JavaScript:

var libraryViewModel = {
        boxes: [
            {
                title: "Google",
                src: false,
                url: 'https://google.se',
            },
            {
                title: "Yahoo",
                src: false,
                url: 'https://se.yahoo.com',
            },
        ]

    };

...和 ​​html:

<a class="box" data-bind="attr: { href: url,'style': 'background-image: url('+ src +');' }">
        <h2 data-bind="text: title">Unnamed</h2>
    </a>

请帮忙。抱歉我的英语不好。

Answer 1

是的，你可以。您可以使用 attr 绑定(bind)动态更新任何 HTML 元素的任何属性。

fiddle 示例:

function ViewModel() {
  this.boxes = [{
      title: "Blank Target",
      url: 'https://www.tutorialrepublic.com/html-tutorial/html-iframes.php',
      target: 'iframe_b'
    },
    {
      title: "Self Target",
      url: 'https://www.yelp.com',
      target: 'iframe_a'
    },
  ];

};

ko.applyBindings(new ViewModel())

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="foreach: boxes">
  <a class="box" data-bind="attr: { href: url, target: target}">
    <h2 data-bind="text: title">Unnamed</h2>
  </a>
</div>

<iframe name="iframe_a"></iframe>
<iframe name="iframe_b"></iframe>