Шаблоны UI в JavaScript

И альтернатива должна только испустить его как простой HTML. Да, редактор заставит Вас думать, что Вы неправы, но это, кажется, происходит вполне часто с VS2008SP1. Этот пример специально для флажков, который, кажется, полностью потрачен впустую в CTP5, но он дает Вам общее представление, как испустить условные атрибуты.

<input type="checkbox" name="roles" value='<%# Eval("Name") %>' 
  <%# ((bool) Eval("InRole")) ? "checked" : "" %> 
  <%# ViewData.Model.IsInRole("Admin") ? "" : "disabled" %> />
11
задан Anvaka 31 August 2009 в 10:26
поделиться

5 ответов

Шаблоны обычно не зависят от языка. Если шаблон имеет значение, за исключением некоторых крайних случаев, он будет иметь значение независимо от того, какой язык или технологию вы используете. Возьмите MVC. Концепция отделения модели от представления от контроллера имеет значение независимо от того, реализована ли модель с помощью СУБД или какой-либо другой технологии, будь то представление HTML, Swing или X.

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

Сам JavaScript не навязывает вам какой-либо определенный шаблон. Некоторые JavaScript-фреймворки, такие как YUI, Dojo или Glow, будут вести вас в одном направлении больше, чем в другом.

В конце концов, посмотрите на проблему, которую вы '

8
ответ дан 3 December 2019 в 08:30
поделиться

Я хотел бы порекомендовать книгу Росс Хармес и Дастин Диаз Pro JavaScript Design Patterns , безусловно, лучший ресурс по этой теме, и его определенно стоит прочитать.

] В последнем выпуске A List Apart есть очень интересная статья о JavaScript MVC .

4
ответ дан 3 December 2019 в 08:30
поделиться

Хороший подход к созданию приложения с графическим интерфейсом пользователя - это браузер:

  1. с использованием разметки для макета пользовательского интерфейса
  2. с использованием javascript Логика пользовательского интерфейса
  3. с использованием CSS для стилизации пользовательского интерфейса

Большинство современных сред GUI (ExtJS, Dojo и т. Д.) Предлагают API, которые значительно помогают создавать графический интерфейс только на JavaScript. Но есть еще одна структура графического интерфейса Ample SDK , которая обеспечивает вышеупомянутое разделение задач. Он позволяет использовать языки на основе XML (XHTML, XUL, SVG) для макета, CSS для стиля и DOM API для логики пользовательского интерфейса.

Для оркестровки клиентского приложения с графическим интерфейсом вы можете использовать либо MVC, либо немного более продвинутый шаблон PAC, как и для первого - доступна реализация PureMVC

Взгляните на следующий фрагмент (касается только логики пользовательского интерфейса, а не логики приложения, которая должна быть создана с помощью MVC / PAC):

index.html

<script type="application/ample+xml">
    <xul:tabbox onselect="fOnSelect(event)"
     xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
        <xul:tabs>
            <xul:tab label="checkbox" />
            <xul:tab label="textbox" />
            <xul:tab label="datepicker" />
        </xul:tabs>
        <xul:tabpanels>
            <xul:tabpanel>
                <xul:checkbox />
            </xul:tabpanel>
            <xul:tabpanel>
                <xul:textbox />
            </xul:tabpanel>
            <xul:tabpanel>
                <xul:datepicker />
            </xul:tabpanel>
        </xul:tabpanels>
    </xul:tabbox>
</script>

index.css

@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
xul|tab:focus {
    color: red;
}

index.js

function fOnSelect(oEvent) {
    alert(oEvent.currentTarget.selectedItems.length)
}
1
ответ дан 3 December 2019 в 08:30
поделиться

Насколько мне известно, конкретных шаблонов для Javascript пока нет. Но я думаю, что есть потенциал для чего-то вроде виджетов (компонентного) подхода. Поскольку в основном мы используем javascript для расширения возможностей нашего html-кода. Логично, что мы должны подключить каждый наш объект javascript к тегу html. Итак, здесь у нас есть что-то вроде Model (jsObject) + View (HTML-представление). Чтобы получить MVC, нам нужны контроллеры, и для этого у нас есть события. В этом случае у нас будет инкапсулированный компонент, который легко расширяется.

например:

// this is a part of some FormValid.js
<script>
function FormValid(){

}

FormValid.prototype.validate=function(){...}
</script>

//this is our HTML
<form id="form1"...onsubmit="this.jsObject.validate();">
</form>

<script>
//all the following stuff could be solved in one line, but you need to create some helper. Like Components.Attach("FormValid").to("form1");
var newObj=new FormValid()
var form=document.getElementById("form1");
from.jsObject=newObj;
newObj.htmlObj=form;
</script>

Также у меня есть идея использовать механизмы шаблонов, такие как Zparser , для разделения представления и модели. Я разрабатываю для этого js-библиотеку, поэтому сейчас я отвечаю на этот вопрос.

У нас есть базовый объект с методом view . Все наши классы имеют это как прототип в конце. Этот метод получает свойство класса templates и с помощью парсера некоторых шаблонов генерирует HTML на основе нашей модели. Этот HTML вставляется в узел htmlObj, поэтому ВИД нашего объекта обновляется. По сути, это идея, и наш код выглядит следующим образом:

// this is a part of some FormValid.js
<script>
function FormValid(){

}
Components.extendCore(FormValid);

FormValid.prototype.validate=function(){...}
</script>

FormValid.prototype.templates={
   main:'<form class="form1"...onsubmit="this.jsObject.validate();">...</form>'
}

//this is our HTML
<div id="form1"></div>
<script>
Components.Attach("FormValid").to("form1");
</script>

Я все еще думаю, что последний встроенный