ko.bindingHandler with Durandal

Question

Durandal에서 작동하는 Knockout 바인딩 처리기를 가져 오는 데 문제가 있습니다. 현재 RequireJS를 통해 todo.js라는 viewmodel에로드하는 bindings.js라는 파일이 있습니다. 그리고 어떤 이유로 든 바인딩 핸들러가 붙어 있지 않은 것처럼 보입니다. 할 일을 추가하고 키보드로 돌아 오는 길에 Enter 키가 작동하지 않습니다. 어떤 도움을 주셔서 감사합니다. 프로젝트 코드는 https://github.com/robksawyer/durandal-todo입니다. 자유롭게 그것을 포크하십시오. 또한 Knockout 코드의 대부분이 TodoMVC Knockout+Require 프로젝트에서 나왔다는 사실에 주목할 가치가 있습니다.

다음은 bindings.js 파일의 스 니펫입니다. 파일은 https://github.com/robksawyer/durandal-todo/blob/master/scripts/bindings.js입니다.

// a custom binding to handle the enter key (could go in a separate library) 
ko.bindingHandlers.enterKey = { 
     init: function (element, valueAccessor, allBindingsAccessor, data) { 
      var wrappedHandler, newValueAccessor; 

      system.log("ENTER KEY PRESSED"); 

      // wrap the handler with a check for the enter key 
      wrappedHandler = function (data, event) { 
       if (event.keyCode === config.ENTER_KEY) { 
        valueAccessor().call(this, data, event); 
       } 
      }; 

      // create a valueAccessor with the options that we would want to pass to the event binding 
      newValueAccessor = function() { 
       return { 
        keyup: wrappedHandler 
       }; 
      }; 

      // call the real event binding's init function 
      ko.bindingHandlers.event.init(element, newValueAccessor, allBindingsAccessor, data); 
     } 
    }; 

다음은 bindingHandler를 연결하는 HTML 스 니펫입니다. 파일은 https://github.com/robksawyer/durandal-todo/blob/master/views/todos.html입니다.

<header id="header"> 
    <h1>todos</h1> 
    <input id="new-todo" type="text" data-bind="value: current, valueUpdate: 'afterkeydown', enterKey: add" placeholder="What needs to be done?" autofocus> 
</header> 

는 그리고 마지막으로, 여기가 장전 뷰 모델에서 코드 조각입니다. 파일은 https://github.com/robksawyer/durandal-todo/blob/master/viewmodels/todos.js입니다.

시간을 내 주셔서 다시 한번 감사드립니다.

Answer 1

Binding.js는 AMD 형식이 아니므로 녹아웃을로드하고 종속성으로 선언하지 않은 후에로드하는 것이 좋습니다. AMD 형식의 scripts/native입니까?

define(
    [ 
    //'knockout', // Durandal expects knockout and $ loaded via script tag, 
    //'jquery', // no need to define them as deps as well 
    'durandal/app', 
    'durandal/system', 
    'scripts/dataservice', 
    'scripts/model', 
    'scripts/config', 
    //'scripts/bindings', 
    'scripts/native' // remove if not in AMD format 
    ], 
    function(app, system, dataservice, model, config) { 
    'use strict';