挖空js CSS 绑定

Question

我在我的项目中使用 Knockout js，我需要添加多个 css class 名称到特定 tag.below 是我的代码我有三个不同的 class我如何将它添加到敲除 css 绑定中，请建议。

<img data-bind="attr: { src:ProfileImageSrcName }" class="tabUser profile-Image tabpic" />

Answer 1

使用 css 绑定分配多个 class 名称。

http://knockoutjs.com/documentation/css-binding.html

var masterVM = (function () {
  var self = this;      
  self.classNames = ko.pureComputed(function(){
    return "className1 className2 className3";
  }, self);
})();

ko.applyBindings(masterVM);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div class="existingClass" data-bind="css: classNames">
  Inspect this element to see list of the 4 class names.
</div>

Answer 2

您可以像下面那样使用 css 绑定。

var vm = {
  profileImageSrcName: ko.observable('http://cumbriaskills.wdfiles.com/local--files/files:images/metro_128_chrome.png'),
  isProfilePic: ko.observable(true),
  isTab: ko.observable(true),
  toggleProfile: function() { vm.isProfilePic(!vm.isProfilePic()); },
  toggleTab: function() { vm.isTab(!vm.isTab()); }
};

ko.applyBindings(vm);

.tabUser { width: 100px; height: 100px; object-fit: contain; }
.profile-image { border-radius: 100% } 
.tabPic { box-shadow: 0 2px 6px rgba(0,0,0,0.4) }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<img data-bind="attr: { src: profileImageSrcName }, 
                css: { 
                  'profile-image': isProfilePic, /* single class */
                  'tabUser tabPic': isTab  /* multiple classes */
                }" />
<br><br>
<button data-bind="click: toggleProfile">Toggle "profile-image" Class</button><br>
<button data-bind="click: toggleTab">Toggle "tabUser" and "tabPic" Classes</button>

挖空js CSS 绑定

Knockout js CSS binding

css

knockout-2.0

knockout.js