dojox.mobile보기에 재사용 가능한 컨트롤러 코드를 작성하는 방법

Question

dojox.mobile 프레임 워크를 기반으로 응용 프로그램을 작성하고 있습니다. 나는 dojo 1.9를 사용하고있다. 응용 프로그램의 일부보기는 정말 유사하며 공통점이 많아서 일반적인보기를 만들고 특수화하기 위해 확장하려고합니다.

모든보기에 컨트롤러가있는 것을 감안할 때 상위 컨트롤러 (정의 기능을 통해 정의 된 모듈)를 만든 다음 확장하려고 시도했지만 성공하지는 못했습니다.

내가 같은 GeneralController.js을 만드는 일을 오전 다음

define(["dojo/_base/declare", 
     "dojo/_base/lang", 
     "dojo/on"], 
    function(declare,lang, on){ 
     return declare("AppControllers/GeneralController",[],{ 
      init: function(){ 
        //do something in GeneralController 
      }, 

      beforeActivate: function(){ 
        //... 
      } 
     }) 
    } 
); 

하고 다음과 같은 View1.js 컨트롤러 :

define(["dojo/_base/declare", 
     "dojo/_base/lang", 
     "dojo/on", 
     "AppControllers/GeneralController"], 
    function(declare,lang, on, general){ 
     return declare(general,{ 
      init: function(){ 
        //do something in this View1.js controller 
        this.inherited();//do what was in general 
      }, 

      beforeActivate: function(){ 
        //... 
      } 
     }) 
    } 
); 

과 내가 가지고있는 config.json의를 :

{ 
    //... 
    "views":{ 
     //... 
     "View1":{ 
      "template":"AppTemplates/View1.html", 
      "controller":"AppControllers/View1.js" 
     }, 
     //... 
    } 
    //... 
} 

dojo.mobile 프레임 워크는 dojo 클래스로 작성된보기 제어기를 허용하지 않는 것 같습니다 (via declare). 뷰 컨트롤러의 계층 구조는 어떻게 얻을 수 있습니까?

Answer 1

그것은 @ tik27에 의해 제안 나를 위해 가장 좋은 방법은, DojoX는/응용 프로그램을 사용하는 것으로 나타났다.

뷰에 연결된 컨트롤러 모듈을 확장하려고했으나 (아래 설정에서 AppControllers/View1.js 참조)이 모듈은 단순히보기와 혼합되어 있습니다. 보기의 고급 처리를 얻으려면 유형 속성을 사용할 수 있습니다 (아래의 config json 발췌 부분을 다시 참조하십시오).

config.JSON :

{ 
    //... 
    "views":{ 
     //... 
     "View1":{ 
      "template":"AppTemplates/View1.html", 
      "controller":"AppControllers/View1.js" 
      "type":"my/SpecializedView.js" 
     }, 
     //... 
    } 
    //... 
} 

은 단순히에 DojoX는/응용 프로그램 /보기을 확장 할 필요가 이렇게하려면 내 내/GenericView 사용자 정의 속성과 메서드가 포함됩니다. 그럼 난 내/GenericView을 확장 SpecializedViews 작성할 수 있습니다

내/GenericView.js

define([ 
    "dojo/_base/declare", 
    "dojox/app/View" 
], function(declare, View) { 
    return declare("my/GenericView",[View], { 
     customProp: "example", // Default content 
     customMethod:function(){ 
      //do something 
     } 
    }); 
}); 

를 내/SpecializedView.js 어쨌든

define([ 
    "dojo/_base/declare", 
    "my/GenericView" 
], function(declare, GenericView) { 
    return declare(GenericView, { 
     init:function(){ 
      console.log(this.customProp);//will print "example" 
     } 
     customMethod:function(){ 
      this.inherited(arguments);//recall parent class' method 
      //extend parent class' method 
     } 
    }); 
}); 

는이 질문의 제목은 DojoX는을 말한다/모바일 그래서 완전히 dojox/모바일 예제를 찾을 수 있습니다이 jsfiddle http://jsfiddle.net/g00glen00b/5PCrb/에 의해 @Dimitri M

Answer 2

@ tik27처럼, dojox/app이 해결책 일 수 있습니다. 그러나 dojox/app 섹션의 문서에는 좋은 예제가 없으므로 다른 사람들을위한 학습 곡선을 낮추기 위해 재사용 성을 향상시키는 자체 프레임 워크 (dojox/mobile for IBM Worklight)를 만들었습니다.

우리는 실제로이 같은 템플릿을 사용하여 dojox/mobile/View을 확장하는 "기본 컨트롤러"모듈을 만든 :

define([ 
    "dojo/_base/declare", 
    "dojox/mobile/View", 
    "dijit/_TemplatedMixin" 
], function(declare, View, TemplatedMixin) { 
    return declare([View, TemplatedMixin], { 
     templateString: "<header>My header</header> ${!content} <footer>footer</footer>", 
     content: null // Default content 
    }); 
}); 

우리가 헤더와 바닥 글과 표준 템플릿을 볼 수 있듯이, 그러나 우리는 또한을 사용 자리 표시자는 content입니다. 템플릿의 일반적인 부분 (이 경우 머리글/바닥 글)은 여기에 넣을 수 있습니다. 이런이 기지국 제어기 모양으로 연장

보기/제어 모듈은 : 우리는 여기 content 속성을 입력하기 때문에

define([ 
    "dojo/_base/declare", 
    "./ControllerMixin" 
], function(declare, ControllerMixin) { 
    return declare([ControllerMixin], { 
     content: "This is the content" 
    }); 
}); 

, 그것은 앞에서 정의한 ${!content}의 위치에 배치한다.

당신이 당신의 템플릿 하다며 사용하는 위젯을해야하는 경우도 선택할 수 있습니다 dijit/_WidgetsInTemplateMixin