change binding and isolate interaction with view to onload

Author: anowell

Cargo.toml

@@ -9,11 +9,7 @@ repository = "https://github.com/anowell/quasar"
 rustc-serialize = "0.3.18"
 downcast-rs = "0.1.2"
 uuid = { version = "0.4.0", features = ["v4"] }
-mustache = { version = "0.8.0", optional = true }
 
 [dependencies.webplatform]
 #git = "https://github.com/anowell/rust-webplatform.git"
 path = "../rust-webplatform"
-
-[features]
-default = ["mustache"]

README.md

@@ -41,20 +41,21 @@ A basic example might include an HTML file like this:
 You can bind and update data with a snippet like this:
 
 ```rust
-#[derive(BartDisplay)]
+#[derive(Default, BartDisplay)]
 #[template_string = "<p>Count: {{count}}</p><button>+1</button>"]
 struct CounterData { count: u32 }
 
-fn main() {
-    let mut app = quasar::init();
-
-    let component = CounterData { count: 0 };
-    app.bind("#counter", component)
-        .query("button").unwrap()
-        .on(EventType::Click, |mut evt| {
-            evt.binding.data_mut().count += 1;
+impl Component for CounterData {
+    fn onload(view: &View<Self>) {
+        view.on_each(EventType::Click, "button", |mut evt| {
+              evt.binding.data_mut().count += 1;
         });
+    }
+}
 
+fn main() {
+    let mut app = quasar::init();
+    app.bind("#counter", CounterData::default());
     app.spin();
 }
 ```

examples/app/src/components/cat_list.rs

@@ -1,6 +1,7 @@
 use quasar::*;
 
-struct CounterData {
+#[derive(Default)]
+pub struct CounterData {
     count: u32,
 }
 
@@ -13,13 +14,10 @@ impl Renderable for CounterData {
     }
 }
 
-pub fn init(app: &QuasarApp) {
-    let component = CounterData {
-        count: 0
-    };
-
-    app.bind("#counter", component)
-        .on_each(EventType::Click, "button", |mut evt| {
+impl Component for CounterData {
+    fn onload(view: &View<Self>) {
+        view.on_each(EventType::Click, "button", |mut evt| {
             evt.binding.data_mut().count += 1;
         });
-}
+    }
+}

examples/app/src/components/counter.rs

@@ -3,11 +3,13 @@ mod counter;
 // mod cat_list;
 mod todo;
 
-use quasar::QuasarApp;
+use quasar::{QuasarApp, Queryable};
+use self::todo::TodoList;
+use self::counter::CounterData;
 
 pub fn init(app: &QuasarApp) {
     // hello::init(&app);
-    counter::init(&app);
     // cat_list::init(&app);
-    todo::init(&app);
+    app.bind("#counter", CounterData::default());
+    app.bind("#todo-list", TodoList::default());
 }

examples/app/src/components/mod.rs

@@ -1,11 +1,13 @@
 use quasar::*;
 
-struct TodoItem {
+#[derive(Default)]
+pub struct TodoItem {
     label: String,
     complete: bool,
 }
 
-struct TodoList {
+#[derive(Default)]
+pub struct TodoList {
     items: Vec<TodoItem>,
 }
 
@@ -27,31 +29,25 @@ impl Renderable for TodoList {
     }
 }
 
-pub fn init(app: &QuasarApp)  {
-    let component = TodoList {
-        items: vec![
-            TodoItem { label: "Example Task".to_string(), complete: false },
-        ]
-    };
-
-    let view = app.bind("#todo-list", component);
-
-    // TODO: use view.query("button").on(...)
-    // but since we don't patch the DOM yet, the attached element
-    // is always destroyed, so we need to attach the event to a nested selector fo now
-    view.on_each(EventType::Click, "button", |mut evt| {
-        match evt.binding.query("#message") {
-            Some(node) => {
-                let item = TodoItem { label: node.get("value"), complete: false };
-                evt.binding.data_mut().items.push(item);
+impl Component for TodoList {
+    fn onload(view: &View<Self>) {
+        // TODO: use view.query("button").on(...)
+        // but since we don't patch the DOM yet, the attached element
+        // is always destroyed, so we need to attach the event to a nested selector fo now
+        view.on_each(EventType::Click, "button", |mut evt| {
+            match evt.binding.query("#message") {
+                Some(node) => {
+                    let item = TodoItem { label: node.get("value"), complete: false };
+                    evt.binding.data_mut().items.push(item);
+                }
+                None => println!("Query for #message returned nothing.")
             }
-            None => println!("Query for #message returned nothing.")
-        }
-    });
+        });
 
-    view.on_each(EventType::Change, ".todo-item input", |mut evt| {
-        let state = evt.target.checked();
-        let mut item_list = evt.binding.data_mut();
-        item_list.items[evt.index].complete = state;
-    });
+        view.on_each(EventType::Change, ".todo-item input", |mut evt| {
+            let state = evt.target.checked();
+            let mut item_list = evt.binding.data_mut();
+            item_list.items[evt.index].complete = state;
+        });
+    }
 }

examples/app/src/components/todo.rs

@@ -5,4 +5,5 @@ authors = ["Anthony Nowell <[email protected]>"]
 
 [dependencies]
 rustc-serialize = "0.3.18"
+mustache = "0.8.0"
 quasar = { path = "../.." }

examples/maudapp/src/components/counter.rs

@@ -0,0 +1,51 @@
+use quasar::*;
+use helper::RuntimeComponent;
+
+#[derive(Debug, RustcEncodable)]
+pub struct CatData { cats: Vec<Cat> }
+
+#[derive(Debug, RustcEncodable)]
+pub struct Cat { name: String }
+
+type CatComponent = RuntimeComponent<CatData, ::mustache::Template>;
+
+pub fn init() -> CounterComponent  {
+    let cat_names = vec!["Bella", "Tiger", "Chloe", "Shadow", "Luna", "Oreo"];
+    let cats = cat_names.iter()
+        .map(|c| Cat{ name: c.to_string() })
+        .collect();
+
+    RuntimeComponent {
+        props: vec![],
+        data: CatData {
+            cats: cats
+        },
+        template: compile_str(r##"
+            <ul>
+            {{#cats}}
+                <Cat catname='{{ name }}'></Cat>
+            {{/cats}}
+            </ul>
+        "##).expect("failed to compile cat_list template")
+    }
+
+    // TODO: currently lack a way to nest RuntimeComponents
+    //   Not sure if that's a good or bad thing yet...
+    // RuntimeComponent {
+    //     data: (),
+    //     props: vec!["catname"],
+    //     template: compile_str(r##"
+    //         <li>{{ props.catname }}</li>
+    //     "##).expect("failed to compile cat_item template")
+    // };
+
+}
+
+impl Component for CatComponent {
+    fn onload(view: &View<Self>) {
+        app.on_each(EventType::Click, "Cat".to_string(), |evt| {
+            let catname = evt.target.get("catname");
+            println!("MEOW {}", &catname);
+        });
+    }
+}

examples/maudapp/src/components/mod.rs

@@ -0,0 +1,32 @@
+use quasar::*;
+use helper::RuntimeComponent;
+
+#[derive(Debug, RustcEncodable)]
+pub struct CounterData {
+    count: u32,
+}
+
+type CounterComponent = RuntimeComponent<CounterData, ::mustache::Template>;
+
+pub fn init() -> CounterComponent  {
+    RuntimeComponent {
+        data: CounterData {
+            count: 0
+        },
+
+        props: vec![],
+
+        template: compile_str(r##"
+            <p>Count: {{count}}</p>
+            <button>+1</button>
+        "##).expect("failed to compile counter template")
+    }
+}
+
+impl Component for CounterComponent {
+    fn onload(view: &View<Self>) {
+        view.on_each(EventType::Click, "button", |mut evt| {
+            evt.binding.data_mut().count += 1;
+        });
+    }
+}