Knockout - 将来自 event.target 的属性值作为点击事件的参数传递

Question

我正在尝试淘汰赛。我在 div 中有三个按钮（"Packers"、"Trail Blazers" 和 "Dodgers"）。每个按钮的数据联赛属性分别为 "NFL"、"NBA" 和 "MLB"。当我单击 div 时，我希望 ViewModel 中的单击事件处理程序以球队的名称和他们参加的联赛直接传递。我目前所做的工作是从提供给处理程序的事件参数中获取值——但使用该事件，特别是直接命名的 HTML 属性似乎与 MVVM 模式相反。

<div data-bind="click : doSomething">
  <button data-league="NFL">Packers</button>
  <button data-league="NBA">Trail Blazers</button>
  <button data-league="MLB">Dodgers</button>
</div>
<span data-bind="text:myObservable"></span>

(function() {
  window.onload = function(e) {
    try {
      var myViewModel =  {
        myObservable : ko.observable("Initial Value"),
        doSomething : (viewModel , event )=>{
          console.log("doSomething is executing")
          //How can I avoid using event.target.attributes in the viewModel code below and
          //instead have the data-league value passed in as a parameter?
          if(event.target.attributes["data-league"]){
            let league = event.target.attributes["data-league"].value
            let team = event.target.innerText
            viewModel.myObservable("The " + team + " are an " + league + " team")  
          }

        }
      }

      ko.applyBindings(myViewModel)

    } 
    catch (ex) {
      console.log(ex.toString());
    }
  }
})();

** 编辑 - 下面的 codepen 被编辑以反映 Jeff Mercado 的回答，现在在 TypeScript 中并且更符合 MVVM 精神 **

https://codepen.io/Walkipedia/pen/jONjweq?editors=1111

Answer 1

出于这个原因，您真的应该在按钮本身而不是父元素上应用点击事件处理程序。

您应该更改您的模型以保存代表团队的对象，并让您的点击处理程序使用这些对象。

const myViewModel = {
  myObservable: ko.observable("Initial Value"),
  teams: [
    { league: "NFL", team: "Packers" },
    { league: "NBA", team: "Trail Blazers" },
    { league: "MLB", team: "Dodgers" }
  ],
  doSomething: ({league, team}) => {
    console.log("doSomething is executing");
    myViewModel.myObservable(`The ${team} are an ${league} team`);
  }
};

<div data-bind="foreach: teams">
  <button data-bind="click: $root.doSomething, text: team"></button>
</div>
<span data-bind="text: myObservable"></span>

Knockout - 将来自 event.target 的属性值作为点击事件的参数传递

Knockout - pass attribute value from event.target as a parameter on click event

parameters

click

mvvm

knockout.js

typescript