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绑定动态更新任何HTML元素的任何属性。

示例小提琴：

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>

Answer 2

请查看这个jsFiddle，希望能够实现你所需要的。

我做的第一件事是使用knockout应用你的视图模型：

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

};

ko.applyBindings(new libraryViewModel())

在HTML I中迭代每个框并应用href属性和其他属性：

<div data-bind="foreach: boxes">

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

这是jsFiddle的链接：https://jsfiddle.net/internetbird/jfehbv3u/5/

希望这会有所帮助：）

击倒目标

2 个答案: