Knockout - передать значение атрибута из event.target в качестве параметра события нажатия - PullRequest
Новая
       24

Knockout - передать значение атрибута из event.target в качестве параметра события нажатия

0 голосов
/ 01 октября 2019

Я экспериментирую с нокаутом. У меня есть три кнопки («Packers», «Trail Blazers» и «Dodgers») в div. Каждая кнопка имеет атрибут data-league «NFL», «NBA» и «MLB» соответственно. Когда я нажимаю на div, я хочу, чтобы обработчик события click в 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());
    }
  }
})();

** РЕДАКТИРОВАТЬ - кодовое поле ниже было отредактировано, чтобы отразить ответ Джеффа Меркадо, и теперь оно написано на TypeScript и более в духе MVVM **

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

1 Ответ

1 голос
/ 01 октября 2019

По этой причине вы действительно должны применять обработчик события click к самим кнопкам, а не к родительскому элементу.

Вы должны изменить свою модель, чтобы она содержала объекты, представляющие команды, и имела свой обработчик щелчков. используйте эти объекты. 

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>
...