Question

我想通过点击按钮更改我的应用程序的背景图像。问题是我已经绑定了一个点击它。有什么办法可以通过按钮改变它吗？

<button type="button" name="grid30" class="btn btn-primary btn-xs active" data-bind="click: function() {app.changeVisibleDays(29);};">30-days</button>

Answer 1

由于您使用内嵌功能作为点击处理程序，因此您只需添加一个函数调用来更改其中的背景图像：

<button type="button" name="grid30" class="btn btn-primary btn-xs active" 
        data-bind="
            click: function() {
              app.changeVisibleDays(29);
              app.changeBackground();
            };">30-days</button>

Answer 2

我认为KnockoutJS鼓励使用MVVM appproach来解决这些任务：

var viewModel = function() {
	return {
  	image: ko.observable(""),
    changeBackground: function() {
    	this.image("url(http://www.w3schools.com/html/pic_mountain.jpg)");
    }
  }
};

ko.applyBindings(new viewModel());

.button {
  background-color: gray;
  cursor: pointer;
  psdding: 5px;
}
.button:hover {
  background-color: lightgray;
}


.image {
  border: 1px solid black;
  width: 100px;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div class='button' data-bind='click: changeBackground'>Change background</div>
</br>
<div class='image' data-bind='style: { backgroundImage: image}'></div>

更新1

“changeBackground”处理程序是一个编写业务逻辑的地方，例如

app.changeVisibleDays(29);

chnange背景或做其他事情。

如果您已有模型（“app”），则可以将此处理程序嵌入“app”对象中：

data-bind =“click：app.changeBackground”

“changeBackground”是按钮点击处理程序的示例名称。当然，在RWA中，您将更适合更改其名称。

是否有可能一次数据绑定多种类型？

2 个答案:

更新1