1. Дважды щелкните home.html в Solution Explorer (Обозреватель решений), чтобы открыть его.
2. Выполните привязку данных для элементов, которые отображают изображение и сведения о нем.
   1. Выполните привязку свойства innerHTML элемента imageName к свойству displayName источника данных.
      HTML

      <div id="imageName" class="pageSubheader" 
       data-win-bind="innerHTML: displayName">Image name</div>
      
      

   2. Выполните привязку свойства src элемента displayImage к свойству src источника данных.
      HTML

      <img id="displayImage" src="#" data-win-bind="src: src" />
      
      

   3. Выполните привязку свойства innerHTML элемента fileName к свойству name источника данных.
      HTML

      <div id="fileName" data-win-bind="innerHTML: name">File name</div>
      
      

   4. Выполните привязку свойства innerHTML элемента path к свойству path источника данных.
      HTML

      <div id="path" data-win-bind="innerHTML: path">Path</div>
      
      

   5. Выполните привязку свойства innerHTML элемента dateCreated к свойству dateCreated источника данных.
      HTML

      <div id="dateCreated" 
       data-win-bind="innerHTML: dateCreated">Date created</div>
      
      

   Получим обновленный код HTML для основного раздела файла home.html:

   HTML

    <section aria-label="Main content" role="main">
    <div id="contentGrid">
    <button id="getPhotoButton">Get photo</button>
    <div id="imageName" class="pageSubheader" 
    data-win-bind="innerHTML: displayName">Image name</div>
   
    <div id="imageGrid">
    <img id="displayImage" src="#" data-win-bind="src: src" />
    <div id="imageInfoContainer">
    <label for="fileName">File name:</label>
    <div id="fileName" data-win-bind="innerHTML: name">File name</div>
    <label for="path">Path:</label>
    <div id="path" data-win-bind="innerHTML: path">Path</div>
    <label for="dateCreated">Date created:</label>
    <div id="dateCreated" 
    data-win-bind="innerHTML: dateCreated">Date created</div>
    </div>
    </div>
    </div>
    </section>
   
   

3. Дважды щелкните home.js в Solution Explorer (Обозреватель решений), чтобы открыть его.
4. Сразу после директивы use strict добавьте код, чтобы задать для свойства WinJS.Binding.optimizeBindingReferences значение true.
   JavaScript

   (function () {
    "use strict";
   
    WinJS.Binding.optimizeBindingReferences = true;
   
   

5. В методе loadImage после существующего кода получите элемент contentGrid. Вызовите метод WinJS.Binding.processAll в конец loadImage и передайте ему contentGrid и photoObject.
   JavaScript

    loadImage: function (file) {
   
    if (file) {
    photoObject.displayName = file.displayName;
    photoObject.name = file.name;
    photoObject.path = file.path;
    photoObject.dateCreated = file.dateCreated;
   
    var imageBlob = URL.createObjectURL(file, { oneTimeOnly: true });
    photoObject.src = imageBlob;
   
    var contentGrid = document.getElementById("contentGrid");
    WinJS.Binding.processAll(contentGrid, photoObject);
   
    }
    },
   
   

6. Запустите приложение. Нажмите кнопку "Get photo" (Получить фотографию) и выберите изображение.

   Так выглядит приложение с выбранным изображением и привязкой текстовых блоков к данным.

   

Шаг 3: сохранение и загрузка состояния

В части 2 этой серии учебников Управление жизненным циклом и состоянием приложения вы узнали, как сохранять и восстанавливать состояние приложения. Необходимо также сохранить состояние в новом фотоприложении. Необходимо сохранить и восстановить только файл изображения, которое отображается в данный момент.

Но нельзя просто сохранить путь к файлу и затем заново открыть его по этому пути. Когда пользователь выбирает файл с помощью FileOpenPicker, он неявно предоставляет вашему приложению разрешение для этого файла. Если позднее вы попытаетесь просто извлечь файл по этому пути, то в разрешении вам будет отказано.

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

• MostRecentlyUsedList—для хранения последних 25 открывавшихся файлов.
• FutureAccessList—для общего хранения до 1000 файлов для доступа в будущем.

Когда пользователь выбирает файл, мы добавляем его в MostRecentlyUsedList. При добавлении файла в этот список MostRecentlyUsedList возвращает маркер, который используется для извлечения файла в дальнейшем. Мы сохраняем этот маркер и используем его для извлечения текущего файла изображения при восстановлении состояния страницы.

Сохранение состояния

1. Дважды щелкните home.js в Solution Explorer (Обозреватель решений), чтобы открыть его.
2. В методе loadImage добавьте код в конец метода, чтобы добавить выбранный файл в mostRecentlyUsedList. Сохраните возвращаемый токен в объекте sessionState.
   JavaScript

   // Add picked file to MostRecentlyUsedList.
   WinJS.Application.sessionState.mruToken =
    Windows.Storage.AccessCache.StorageApplicationPermissions
    .mostRecentlyUsedList.add(file);
   
   

   Вот полный метод loadImage:

   JavaScript

    loadImage: function (file) {
   
    if (file) {
    photoObject.displayName = file.displayName;
    photoObject.name = file.name;
    photoObject.path = file.path;
    photoObject.dateCreated = file.dateCreated;
   
    var imageBlob = URL.createObjectURL(file, { oneTimeOnly: true });
    photoObject.src = imageBlob;
   
    var contentGrid = document.getElementById("contentGrid");
    WinJS.Binding.processAll(contentGrid, photoObject);
   
    // Add picked file to MostRecentlyUsedList.
    WinJS.Application.sessionState.mruToken =
    Windows.Storage.AccessCache.StorageApplicationPermissions
    .mostRecentlyUsedList.add(file);
   
    }
    },
   
   

Загрузка состояния

1. Дважды щелкните default.js в Solution Explorer (Обозреватель решений), чтобы открыть его.
2. В активированном обработчике событий добавьте код, чтобы сохранить предыдущее состояние выполнения в объекте WinJS.Application.sessionState. Это позволит домашней странице обращаться к нему. Добавьте этот код в первый оператор if.
   JavaScript

   // Save the previous execution state. 
   WinJS.Application.sessionState.previousExecutionState =
    args.detail.previousExecutionState;
   
   

   Вот полный активированный обработчик событий:

   JavaScript

    app.addEventListener("activated", function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
   
    // Save the previous execution state. 
    WinJS.Application.sessionState.previousExecutionState =
    args.detail.previousExecutionState;
   
    if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
    // TODO: This application has been newly launched. Initialize
    // your application here.
    } else {
    // TODO: This application has been reactivated from suspension.
    // Restore application state here.
   
    }
   
    if (app.sessionState.history) {
    nav.history = app.sessionState.history;
    }
    args.setPromise(WinJS.UI.processAll().then(function () {
    if (nav.location) {
    nav.history.current.initialPlaceholder = true;
    return nav.navigate(nav.location, nav.state);
    } else {
    return nav.navigate(Application.navigator.home);
    }
    }));
    }
    });
   
   

3. Дважды щелкните home.js в Solution Explorer (Обозреватель решений), чтобы открыть его.
4. Добавьте код в функцию ready, чтобы проверить, было ли приложение закрыто перед этим. Если да, используем метод mostRecentlyUsedList.getFileAsync, чтобы извлечь файл. Этот метод возвращает объект Promise для файла. Передадим методы loadImage и displayError в метод done объекта Promise.
   JavaScript

   if (
    WinJS.Application.sessionState.previousExecutionState
    === Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
    var mruToken = WinJS.Application.sessionState.mruToken;
    if (mruToken) {
    Windows.Storage.AccessCache.StorageApplicationPermissions.
    mostRecentlyUsedList.getFileAsync(mruToken)
    .done(this.loadImage, this.displayError);
    }
   
   }
   
   

   Вот обновленный метод ready:

   JavaScript

    ready: function (element, options) {
    // TODO: Initialize the page here.
   
    document.getElementById("getPhotoButton")
    .addEventListener("click", this.getPhotoButtonClickHandler, false); 
   
    if (
    WinJS.Application.sessionState.previousExecutionState
    === Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
    var mruToken = WinJS.Application.sessionState.mruToken;
    if (mruToken) {
    Windows.Storage.AccessCache.StorageApplicationPermissions.
    mostRecentlyUsedList.getFileAsync(mruToken)
    .done(this.loadImage, this.displayError);
    }
   
    }
   
    },
   
   

5. Чтобы построить и запустить приложение, нажмите клавишу F5. Нажмите кнопку "Get photo" (Получить фотографию) для запуска FileOpenPicker и выберите файл. Теперь в случае приостановки, прекращения работы и восстановления приложения изображение загружается заново.

   
   

Сводка

Поздравляем, вы прошли пятый учебник! Вы научились использовать средства выбора файлов и привязку данных в приложении Магазина Windows.