淘汰赛 - 从 event.target 传递属性值作为点击事件的参数

Posted 2023-03-27

【中文标题】淘汰赛 - 从 event.target 传递属性值作为点击事件的参数

【英文标题】：Knockout - pass attribute value from event.target as a parameter on click event

【发布时间】：2020-01-30 04:57:59

【问题描述】：

我正在尝试淘汰赛。我在一个 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());
    
  
)();

** 编辑 - 下面的代码笔经过编辑以反映 Jeff Mercado 的回答，现在采用 TypeScript 和更多的 MVVM 精神**

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

【参考方案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>

【讨论】：

完美！这让事情变得很清楚，并导致了一些新的 MVVM / Knockout with Typescript 洞察力。已更新链接的 codepen 以纳入您的建议。