Backbone 範本

作者 ：Mads Kristensen

骨幹 SPA 範本是由 Kazi Manzur 擷取者識別碼所撰寫

下載 Backbone.js SPA 範本

Backbone.js SPA 範本的設計目的是讓您開始使用Backbone.js快速建置互動式用戶端 Web 應用程式 。

此範本提供在 ASP.NET MVC 中開發Backbone.js應用程式的初始基本架構。 現成可用的功能提供基本使用者登入功能，包括使用者註冊、登入、密碼重設，以及基本電子郵件範本的使用者確認。

需求：

• ASP.NET 和 Web 工具 2012.2 更新

建立骨幹範本專案

按一下上方的 [下載] 按鈕來下載並安裝範本。 此範本會封裝為 Visual Studio 延伸模組 (VSIX) 檔案。 您可能需要重新開機 Visual Studio。

在 [ 範本] 窗格中，選取 [已安裝的範本 ]，然後展開 [Visual C# ] 節點。 在 [Visual C#] 底下，選取 [Web]。 在專案範本清單中，選取 [ASP.NET MVC 4 Web 應用程式]。 為專案命名，然後按一下 [確定]。

在 [ 新增專案 精靈] 中，選取 [Backbone.js SPA 專案]。

按 Ctrl-F5 建置並執行應用程式而不進行偵錯，或按 F5 以偵錯執行。

按一下 [我的帳戶] 會顯示登入頁面：

逐步解說：用戶端程式代碼

讓我們從用戶端開始。 用戶端應用程式腳本位於 ~/Scripts/application 資料夾中。 應用程式是以 TypeScript (.ts 檔案撰寫，) 編譯成 JavaScript (.js 檔案) 。

應用程式

Application 定義于 application.ts 中。 這個物件會初始化應用程式，並做為根命名空間。 它會維護跨應用程式共用的組態和狀態資訊，例如使用者是否已登入。

方法 application.start 會建立強制回應檢視，並附加應用層級事件的事件處理常式，例如使用者登入。 接下來，它會建立預設路由器，並檢查是否已指定任何用戶端 URL。 如果沒有，則會重新導向至預設 URL (#！/) 。

事件

開發鬆散結合的元件時，事件一律很重要。 應用程式通常會執行多個作業，以回應使用者動作。 骨幹提供內建事件與模型、集合和檢視等元件。 範本不會在這些元件之間建立相依性，而是使用「pub/sub」 模型：在 events events.ts 中定義的 物件會作為發佈和訂閱應用程式事件的事件中樞。 物件 events 是單一物件。 下列程式碼示範如何訂閱事件，然後觸發事件：

events.on('myEvent', (e: MyEventArg) => {
    // Do your work
});

// Later in the code
events.trigger('myEvent', { arg: 'myValue' });

路由器

在Backbone.js中，路由器提供路由用戶端頁面的方法，並將其連線到動作和事件。 範本會在 router.ts 中定義單一路由器。 路由器會建立可啟用的檢視，並在切換檢視時維護狀態。 下一節會說明 (Activable 檢視。) 一開始，專案有兩個虛擬檢視：首頁和關於。 它也有 NotFound 檢視，如果路由未知，就會顯示此檢視。

檢視

檢視定義于 ~/Scripts/application/views 中。 有兩種檢視、可啟用的檢視和強制回應對話方塊檢視。 路由器會叫用可啟用檢視。 顯示可啟用的檢視時，所有其他可啟用的檢視都會變成非作用中。 若要建立可啟用的檢視，請使用 物件擴充檢視 Activable ：

export class MyView extends Backbone.View {
    // Other implementation details
}

// Extending with Activable
_.extend(MyView.prototype, Activable);

Activable使用 將兩個新方法擴充至檢視， activate 以及 deactivate 。 路由器會呼叫這些方法來啟動和取消作用檢視。

強制回應檢視會實作為 Twitter Bootstrap 強制回應對話方塊。 Membership和 Profile 檢視是強制回應檢視。 模型檢視可由任何應用程式事件叫用。 例如，在檢視中 Navigation ，按一下 [我的帳戶] 連結會顯示 Membership 檢視或 Profile 檢視，視使用者是否已登入而定。 會將 Navigation click 事件處理常式附加至具有 data-command 屬性的任何子專案。 以下是 HTML 標籤：

<li>
  <a href="#" data-command="myAccount">
    <i class="icon-user"></i> My Account
  </a>
</li>

以下是 navigation.ts 中連結事件的程式碼：

export class Navigation extends Backbone.View {
    // Other implementation details
    handleCommand(e: JQueryEventObject) {
        var command = $(e.currentTarget).attr('data-command');
        if (command) {
            events.trigger(command);
        }
    }
}
Navigation.prototype.events = () => {
    return {
        'click [data-command]': 'handleCommand'
    };
};

模型

模型定義于 ~/Scripts/application/models 中。 模型全都有三個基本專案：預設屬性、驗證規則和伺服器端端點。 以下是典型的範例：

export class Session extends Backbone.Model {
    urlRoot() {
        return serverUrlPrefix + '/sessions'
    }

    defaults(): ISessionAttributes {
        return {
          email: null,
          password: null,
          rememberMe: false
        }
    }

    validate(attributes: ISessionAttributes): IValidationResult {
        var errors = {};

        if (!attributes.email) {
            Validation.addError(errors, 'email', 'Email is required.');
        }

        if (!attributes.password) {
            Validation.addError(errors, 'password', 'Password is required.');
        }

        if (!_.isEmpty(errors)) {
            return { errors: errors };
        }
    }
}

外掛程式

~/Scripts/application/lib 資料夾包含一些方便的 jQuery 外掛程式。form.ts 檔案會定義外掛程式來處理表單資料。 您通常需要序列化或還原序列化表單資料，並顯示任何模型驗證錯誤。 form.ts 外掛程式具有 、 deserializeFields 和 showFieldErrors 等 serializeFields 方法。 下列範例示範如何將表單序列化為模型。

// Here $el is the form element
// Hide existing errors if there is any
this.$el.hideSummaryError().hideFieldErrors();

// Subscribe invalid event which
// is fired when validation fails
model.on('invalid', () =>
    this.$el.showFieldErrors{(
        errors: model.validationError.errors;
    )}
);

model.save(this.$el.serializeFields(), {
    success: () => { }, // lets do something good
    error: (m, jqxhr: JQueryXHR) => {
        if (jqxhr.status === 400) { // bad request
            // Handle server side field errors
            var response = <any>$.parseJSON(jqxhr.responseText);
            if (response && _.has(response, 'ModelState')) {
                return this.$el.showFieldErrors({
                    errors: response.ModelState
                });
            }
        }

        // All other server errors
        this.$el.showSummaryError({
            message: 'An unexpected error has occurred while performing ' +
                'operation.'
        });
    }
});

flashbar.ts 外掛程式為使用者提供各種意見反應訊息。 方法為 $.showSuccessbar 、 $.showErrorbar 和 $.showInfobar 。 在幕後，它會使用 Twitter Bootstrap 警示來顯示良好的動畫訊息。

confirm.ts 外掛程式會取代瀏覽器的確認對話方塊，雖然 API 稍有不同：

$.confirm({
    prompt: 'Are you sure you want to do it?',
    ok: => { //Do something useful },
    cancel: => { // Do something else }
)};

逐步解說：伺服器程式碼

現在讓我們看看伺服器端。

控制器

在單頁應用程式中，伺服器只會在使用者介面中扮演一個小角色。 伺服器通常會轉譯初始頁面，然後傳送和接收 JSON 資料。

範本有兩個 MVC 控制器： HomeController 會轉譯初始頁面，並 SupportsController 用來確認新的使用者帳戶和重設密碼。 範本中的所有其他控制器都是 ASP.NET Web API控制器，這些控制器會傳送和接收 JSON 資料。 根據預設，控制器會使用新的 WebSecurity 類別來執行使用者相關工作。 不過，它們也有選擇性建構函式，可讓您傳入這些工作的委派。 這可讓您更輕鬆地測試，並使用 IoC 容器取代 WebSecurity 其他專案。 範例如下：

public class SessionsController : ApiController
{
    private readonly Func<string, string, bool, bool> signIn;
    private readonly Action signOut;

    public SessionsController() : this(WebSecurity.Login, WebSecurity.Logout)
    {
    }

    public SessionsController(
        Func<string, string, bool, bool> signIn,
        Action signOut)
    {
      this.signIn = signIn;
      this.signOut = signOut;
    }

    // Rest of the code
}

檢視

檢視的設計目的是要模組化：頁面的每個區段都有自己的專用檢視。 在單頁應用程式中，通常包含沒有任何對應控制器的檢視。 您可以呼叫 @Html.Partial('myView') 來包含檢視，但這會很繁瑣。 為了簡化此動作，範本會定義協助程式方法 IncludeClientViews ，以轉譯指定資料夾中的所有檢視：

@Html.IncludeClientViews('yourViewFolder')

如果未指定資料夾名稱，則預設資料夾名稱為 「ClientViews」。 如果您的用戶端檢視也使用部分檢視，請將部分檢視命名為底線字元 (，例如 _SignUp ，) 。 方法 IncludeClientViews 會排除名稱開頭為底線的任何檢視。 若要在用戶端檢視中包含部分檢視，請呼叫 Html.ClientView('SignUp') 而不是 Html.Partial('_SignUp') 。

傳送Email

若要傳送電子郵件，範本會使用 Postal。 不過，Postal 是從程式碼 IMailer 的其餘部分使用 介面抽象化，因此您可以輕鬆地將它取代為另一個實作。 電子郵件範本位於 [檢視/電子郵件] 資料夾中。 寄件者的電子郵件地址是在appSettings區段索引鍵的 web.config 檔案中 sender.email 指定。 此外，在 debug="true" web.config中時，應用程式不需要使用者電子郵件確認，以加速開發。

GitHub

您也可以在 GitHub上找到Backbone.js SPA 範本。