Question

我是淘汰赛的新手。我有以下数据

var students = [
    { Id: 1, FName: "Fname1", MName = "MName1", LName = "LName1" },
    { Id: 2, FName: "Fname2", MName = "", LName = "LName2"  },
    { Id: 3, FName: "FName3", MName="", LName="" }
];

我有以下查看模型

 var viewModel = {
      //data
      members: ko.observableArray(students),
      //Behaviors
      addMember: function (memberName) {
          this.students.push({ Name: memberName });
     }
 };

ko.applyBindings(viewModel);

以下是视图

  <div data-bind="foreach: members">
<div style="border: solid 1px blue; margin-left: 10px; margin-top: 5px; float: left; height: 50px; width: 100px;" data-bind="drag: {value: $data}">
    <span data-bind="text: Name"></span>
    <div id="secondDiv"></div>
</div>

在第二个div中，我想根据以下内容显示图像如果学生有3个名字，请显示绿色箭头如果学生只有2个名字，则显示黄色箭头如果学生只有1个名字，请显示红色箭头。

此外，我想在这些箭头上进行鼠标悬停。

任何人都可以帮助我吗？

Answer 1

你可以制作一个像这样的学生视图模型

var studentViewModel = function(data){
    var self = this;
  
    self.id = ko.observable(data.Id);
    self.fName = ko.observable(data.Fname);
    self.mName = ko.observable(data.MName);
    self.lName = ko.observable(data.LName);
    
    self.imageSrc = ko.computed(function(){
      var nameCount = 0;
      if(self.fName() && self.fName() != ""){
        nameCount++;
      }
      if(self.mName() && self.mName() != ""){
        nameCount++;
      }
      if(self.lName() && self.lName() != ""){
        nameCount++;
      }
      
      var imageFolder = '/imagefolder/';

      switch (nameCount) {
          case 0:
            return ""; //case: no names
          case 1:
            return imageFolder + "red arrow source"; //case: 1 name
          case 2:
            return imageFolder + "yellow arrow source"; //case: 2 names
          case 3:
            return imageFolder + "green arrow source"; //case: all names
      }
    });
}

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

然后你的学生阵列将成为

var students = [
    new studentViewModel({ Id: 1, FName: "Fname1", MName = "MName1", LName = "LName1" }),
    new studentViewModel({ Id: 2, FName: "Fname2", MName = "", LName = "LName2"  }),
    new studentViewModel({ Id: 3, FName: "FName3", MName="", LName="" })
];

和addMemberfunction将是

addMember: function (memberName) {
          this.students.push(new studentViewModel({ FName: "FName3", MName="", LName="" }));
     }

和secondDiv成为

<div id="secondDiv"><img data-bind="attr:{ src: imageSrc }" /></div>

昏死。图像根据列表中的项目数量

1 个答案: