敲除:更改事件绑定

Question

我有一个不同页面的视图模型。在登陆页面上，我创建了一个下拉列表(html选择表单)，它包含页面选项以外的选择。我想切换到‘仪表板页’页面，一旦在下拉菜单中选择一个选项。

现在，我在js中使用了一个EventListener，但我想知道是否可以通过在下拉列表中使用一个敲除事件绑定来简化它(我在html代码中准备了一个事件行)。

以下是我的当前代码：

​

const availableComponents = ['Header', 'Footer']
const availablePages = ['LandingPage', 'Dashboard', 'About']
const setPage = pageName => {
            const newPage = availablePages.find(p => p === pageName);
            if (newPage) activePage(newPage);
        };
const activePage = ko.observable(availablePages[0]);
const selectElement = document.querySelector('.page-selector');

ko.applyBindings(window.vm);

selectElement.addEventListener('change', () => {
setPage('Dashboard')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js" integrity="sha512-vs7+jbztHoMto5Yd/yinM4/y2DOkPLt0fATcN+j+G4ANY2z4faIzZIOMkpBmWdcxt+596FemCh9M18NUJTZwvw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<label>
  Choose a Component:
  <select class="page-selector" data-bind="
        options: availableComponents
         optionsCaption: 'Select Component',
        event: //add event-binding here
  ">
  </select>
</label>  
 <p> Selected Page: <span data-bind="text: activePage"></span>
</p>
<div class="result"></div>

​

Answer 1

对于它可能涉及的人：

​

const availableComponents = ['Header', 'Footer']
const availablePages = ['LandingPage', 'Dashboard', 'About']
const setPage = pageName => {
            const newPage = availablePages.find(p => p === pageName);
            if (newPage) activePage(newPage);
        };
const activePage = ko.observable(availablePages[0]);
const selectElement = document.querySelector('.page-selector');

ko.applyBindings(window.vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js" integrity="sha512-vs7+jbztHoMto5Yd/yinM4/y2DOkPLt0fATcN+j+G4ANY2z4faIzZIOMkpBmWdcxt+596FemCh9M18NUJTZwvw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<label>
  Choose a Component:
  <select class="page-selector" data-bind="
        options: availableComponents
         optionsCaption: 'Select Component',
        event: {change: () => {
                setPage('Dashboard')
                }}
  ">
  </select>
</label>  
 <p> Selected Page: <span data-bind="text: activePage"></span>
</p>
<div class="result"></div>

​

Answer 2

尽管您的事件发生了更改，但调用函数的工作方式可能与KO的工作方式不同。我会使用在页面选择器绑定上可以观察到的值绑定，使用一个可以观察到您的视图模型属性"selectedPage“的2种方式。

对可观察到的对象使用订阅

pageViewModel.selectedPage.subscribe(function(newValue) {
   setPage(newValue)
});

https://knockoutjs.com/documentation/observables.html